haitu
/
aigc-h5
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

修改列表卡片样式

master
fuxiaochun 2023-08-22 14:41:17 +08:00
parent 9beb538641
commit 97c1367453
3 changed files with 62 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/ArticleDetail/index.vue
View File

@ -27,8 +27,7 @@
<img :src="item.cover" :alt="item.title">
</div>
<div class="rTitle">
<h2>{{ item.title }}</h2>
<span>{{ DateFormat(new Date(item.published_at * 1000), 'yyyy.MM.dd') }}</span>
<h2>[{{ DateFormat(new Date(item.published_at * 1000), 'yyyy.MM.dd') }}]{{ item.title }}</h2>
</div>
<div class="desc">{{ item.description }}</div>
</li>
@ -230,7 +229,7 @@ const goDetail = (id) => {
li{
width: 100%;
height: 428px;
min-height: 428px;
background: #D6D6DD;
border-radius: 3px;
border: 5px solid #D6D6DD;
@ -252,30 +251,29 @@ const goDetail = (id) => {
}
}
.rTitle{
height: 80px;
width: 100%;
padding: 20px 10px;
display: flex;
justify-content: space-between;
align-items: center;
h2{
height: 40px;
font-weight: bold;
font-size: 28px;
line-height: 40px;
margin-right: 10px;
// margin-right: 10px;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
span{
font-weight: normal;
padding-right: 5px;
}
}
span{
height: 40px;
line-height: 40px;
display: inline-block;
font-size: 22px;
}
// span{
// height: 40px;
// line-height: 40px;
// display: inline-block;
// font-size: 22px;
// }
}
.desc{
margin: 10px;

63
src/layouts/Footer.vue
View File

@ -1,27 +1,31 @@
<template>
<div class="footer">
<div class="logo">
<img :src="website.info.web_footer_logo" :alt="website.info.web_title">
</div>
<div class="info">
<p>{{ website.info.web_footer_description }}</p>
</div>
<div class="qrcode"><img :src="website.info.contact_qrcode" :alt="website.info.web_title"></div>
<div class="imgs">
<div class="img">
<img :src="website.info.web_footer_logo" :alt="website.info.web_title">
</div>
<div class="img">
<img :src="website.info.contact_qrcode" :alt="website.info.web_title">
</div>
</div>
<div class="contactInfo">
<p>联系电话：{{ website.info.contact_phone }}</p>
<p>邮箱：{{ website.info.contact_email }}</p>
<p>投诉建议：{{ website.info.contact_phone }}</p>
<p>商务合作：{{ website.info.contact_email }}</p>
<p>联系地址：{{ website.info.contact_address }}</p>
<p>Copyright &copy; {{ curYear }} <span>{{ website.info.copyright }}</span></p>
</div>
<div class="copyright">
<p>{{ website.info.copyright }}</p>
</div>
</div>
</template>
<script setup>
import { useWebsite } from '@/stores/website';
import { ref } from 'vue';
const website = useWebsite();
const curYear = ref(new Date().getFullYear());
</script>
<style lang="scss" scoped>
@ -33,20 +37,26 @@ const curYear = ref(new Date().getFullYear());
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
text-align: left;
font-size: 22px;
.logo{
width: 400px;
height: 112px;
box-sizing: content-box;
padding: 20px;
.imgs{
width: 100%;
height: 230px;
display: flex;
justify-content: center;
align-items: center;
img{
object-fit: contain;
max-width: 100%;
max-height: 100%;
.img{
width: 180px;
height: 180px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 10px;
img{
object-fit: contain;
max-width: 100%;
max-height: 100%;
}
}
}
.info{
@ -54,16 +64,6 @@ const curYear = ref(new Date().getFullYear());
color: #CCC;
padding: 10px;
}
.qrcode{
width: 290px;
height: 290px;
background: #FFF;
overflow: hidden;
margin: 10px auto;
img{
width: 100%;
}
}
.contactInfo{
color: #CCC;
font-size: 22px;
@ -72,5 +72,10 @@ const curYear = ref(new Date().getFullYear());
line-height: 1.5;
}
}
.copyright{
color: #CCC;
line-height: 1.5;
text-align: center;
}
}
</style>

30
src/views/business/components/CategoryCardList.vue
View File

@ -8,8 +8,7 @@
<img :src="item.cover" :alt="item.title">
</div>
<div class="title">
<h2>{{ item.title }}</h2>
<span>{{ DateFormat(new Date(item.published_at * 1000), 'yyyy.MM.dd') }}</span>
<h2><span>[{{ DateFormat(new Date(item.published_at * 1000), 'yyyy.MM.dd') }}]</span> {{ item.title }}</h2>
</div>
<div class="desc">{{ item.description }}</div>
</li>
@ -120,7 +119,7 @@ const goDetail = (id) => {
}
li{
width: 100%;
height: 428px;
min-height: 428px;
background: #D6D6DD;
border-radius: 3px;
border: 5px solid #D6D6DD;
@ -142,29 +141,30 @@ const goDetail = (id) => {
}
}
.title{
height: 80px;
// height: 80px;
width: 100%;
padding: 20px 10px;
display: flex;
justify-content: space-between;
align-items: center;
h2{
height: 40px;
// height: 40px;
font-weight: bold;
font-size: 28px;
line-height: 40px;
margin-right: 10px;
// margin-right: 10px;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
span{
height: 40px;
line-height: 40px;
display: inline-block;
font-size: 22px;
span{
font-weight: normal;
padding-right: 5px;
}
}
// span{
// height: 40px;
// line-height: 40px;
// display: inline-block;
// font-size: 22px;
// }
}
.desc{
margin: 0 10px;