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">
</div>
<div class="rTitle">
<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>
@ -230,7 +229,7 @@ const goDetail = (id) => {
li{
width: 100%;
height: 408px;
min-height: 428px;
background: #D6D6DD;
border-radius: 3px;
border: 5px solid #D6D6DD;
@ -252,36 +251,42 @@ const goDetail = (id) => {
}
}
.rTitle{
height: 80px;
width: 100%;
padding: 20px 10px;
display: flex;
justify-content: space-between;
align-items: center;
// 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{
padding: 10px;
margin: 10px;
font-size: 22px;
font-weight: bold;
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>
<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>
</div>
<div class="copyright">
<p>{{ website.info.copyright }}</p>
</div>
</div>
</template>
@ -30,20 +37,26 @@ const website = useWebsite();
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{
@ -51,16 +64,6 @@ const website = useWebsite();
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;
@ -69,5 +72,10 @@ const website = useWebsite();
line-height: 1.5;
}
}
.copyright{
color: #CCC;
line-height: 1.5;
text-align: center;
}
}
</style>

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: 408px;
min-height: 428px;
background: #D6D6DD;
border-radius: 3px;
border: 5px solid #D6D6DD;
@ -142,35 +141,43 @@ const goDetail = (id) => {
}
}
.title{
height: 80px;
// height: 80px;
width: 100%;
padding: 20px 10px;
display: flex;
justify-content: space-between;
align-items: center;
// 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{
padding: 10px;
margin: 0 10px;
font-size: 22px;
font-weight: bold;
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{