ihzero 2023-08-22 16:20:56 +08:00
commit 48cdf8bdf0
3 changed files with 84 additions and 64 deletions

View File

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

View File

@ -1,17 +1,24 @@
<template> <template>
<div class="footer"> <div class="footer">
<div class="logo">
<img :src="website.info.web_footer_logo" :alt="website.info.web_title">
</div>
<div class="info"> <div class="info">
<p>{{ website.info.web_footer_description }}</p> <p>{{ website.info.web_footer_description }}</p>
</div> </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"> <div class="contactInfo">
<p>联系电话{{ website.info.contact_phone }}</p> <p>投诉建议{{ website.info.contact_phone }}</p>
<p>邮箱{{ website.info.contact_email }}</p> <p>商务合作{{ website.info.contact_email }}</p>
<p>联系地址{{ website.info.contact_address }}</p> <p>联系地址{{ website.info.contact_address }}</p>
</div> </div>
<div class="copyright">
<p>{{ website.info.copyright }}</p>
</div>
</div> </div>
</template> </template>
@ -30,20 +37,26 @@ const website = useWebsite();
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
text-align: center; text-align: left;
font-size: 22px; font-size: 22px;
.logo{ .imgs{
width: 400px; width: 100%;
height: 112px; height: 230px;
box-sizing: content-box;
padding: 20px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
img{ .img{
object-fit: contain; width: 180px;
max-width: 100%; height: 180px;
max-height: 100%; display: flex;
justify-content: center;
align-items: center;
margin: 0 10px;
img{
object-fit: contain;
max-width: 100%;
max-height: 100%;
}
} }
} }
.info{ .info{
@ -51,16 +64,6 @@ const website = useWebsite();
color: #CCC; color: #CCC;
padding: 10px; padding: 10px;
} }
.qrcode{
width: 290px;
height: 290px;
background: #FFF;
overflow: hidden;
margin: 10px auto;
img{
width: 100%;
}
}
.contactInfo{ .contactInfo{
color: #CCC; color: #CCC;
font-size: 22px; font-size: 22px;
@ -69,5 +72,10 @@ const website = useWebsite();
line-height: 1.5; line-height: 1.5;
} }
} }
.copyright{
color: #CCC;
line-height: 1.5;
text-align: center;
}
} }
</style> </style>

View File

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