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

修改列表样式

master
fuxiaochun 2023-08-28 18:06:59 +08:00
parent 34da0ebd61
commit 8c89450977
3 changed files with 25 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/err_img.gif 100644
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.3 KiB

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

@ -24,12 +24,11 @@
<ul> <ul>
<li :key="item.id" v-for="item in recommend" @click="goDetail(item.id)"> <li :key="item.id" v-for="item in recommend" @click="goDetail(item.id)">
<div class="img"> <div class="img">
<img :src="item.cover" :alt="item.title"> <img :src="item.cover || errImg" :alt="item.title">
</div> </div>
<div class="rTitle"> <div class="rTitle">
<h2><span>[{{ DateFormat(new Date(item.published_at * 1000), 'yyyy.MM.dd') }}]</span> {{ item.title }}</h2> <h2><span>[{{ DateFormat(new Date(item.published_at * 1000), 'yyyy.MM.dd') }}]</span> {{ item.title }}</h2>
</div> </div>
<div class="desc">{{ item.description }}</div>
</li> </li>
</ul> </ul>
</div> </div>
@ -41,14 +40,14 @@
</template> </template>
<script setup> <script setup>
import { ref, onBeforeMount, onMounted, onBeforeUnmount } from 'vue'; import { ref, onBeforeMount, onMounted, onBeforeUnmount, computed } from 'vue';
import http from '@/io/http'; import http from '@/io/http';
import { showToast } from 'vant'; import { showToast } from 'vant';
import { useRouter, useRoute } from 'vue-router'; import { useRouter, useRoute } from 'vue-router';
import { DateFormat } from '@/utils/format.js'; import { DateFormat } from '@/utils/format.js';
import AiAssistantFolat from '@/views/chat/components/ai-assistant-float.vue'; import AiAssistantFolat from '@/views/chat/components/ai-assistant-float.vue';
import { useWebsite } from '@/stores/website'; import { useWebsite } from '@/stores/website';
import { computed } from 'vue'; import errImg from '@/assets/images/err_img.gif';
const website = useWebsite(); const website = useWebsite();
@ -247,9 +246,12 @@ const goDetail = (id) => {
cursor: pointer; cursor: pointer;
.img{ .img{
width: 100%; width: 100%;
height: 264px; height: 280px;
background-color: #666; background-color: #666;
overflow: hidden; overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
img{ img{
object-fit: cover; object-fit: cover;
display: block; display: block;
@ -266,12 +268,17 @@ const goDetail = (id) => {
// justify-content: space-between; // justify-content: space-between;
// align-items: center; // align-items: center;
h2{ h2{
height: 160px;
font-weight: bold; font-weight: bold;
font-size: 28px; font-size: 28px;
line-height: 40px; line-height: 40px;
// margin-right: 10px;
flex: 1; flex: 1;
text-align: left; text-align: left;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
span{ span{
font-weight: normal; font-weight: normal;
padding-right: 5px; padding-right: 5px;

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

@ -5,12 +5,11 @@
<ul> <ul>
<li :key="item.id" v-for="item in dataList" @click="goDetail(item.id)"> <li :key="item.id" v-for="item in dataList" @click="goDetail(item.id)">
<div class="img"> <div class="img">
<img :src="item.cover" :alt="item.title"> <img :src="item.cover || errImg" :alt="item.title">
</div> </div>
<div class="title"> <div class="title">
<h2><span>[{{ DateFormat(new Date(item.published_at * 1000), 'yyyy.MM.dd') }}]</span> {{ item.title }}</h2> <h2><span>[{{ DateFormat(new Date(item.published_at * 1000), 'yyyy.MM.dd') }}]</span> {{ item.title }}</h2>
</div> </div>
<div class="desc">{{ item.description }}</div>
</li> </li>
</ul> </ul>
<div class="pageBox" v-if="hasMore"> <div class="pageBox" v-if="hasMore">
@ -31,6 +30,7 @@ import http from '@/io/http';
import { showToast } from 'vant'; import { showToast } from 'vant';
import { DateFormat } from '@/utils/format.js'; import { DateFormat } from '@/utils/format.js';
import { useRouter, useRoute } from 'vue-router'; import { useRouter, useRoute } from 'vue-router';
import errImg from '@/assets/images/err_img.gif';
const router = useRouter(); const router = useRouter();
const route = useRoute(); const route = useRoute();
@ -128,9 +128,12 @@ const goDetail = (id) => {
cursor: pointer; cursor: pointer;
.img{ .img{
width: 100%; width: 100%;
height: 264px; height: 280px;
background-color: #666; background-color: #666;
overflow: hidden; overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
img{ img{
object-fit: cover; object-fit: cover;
display: block; display: block;
@ -148,12 +151,17 @@ const goDetail = (id) => {
// justify-content: space-between; // justify-content: space-between;
// align-items: center; // align-items: center;
h2{ h2{
// height: 40px; // height: 160px;
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;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
span{ span{
font-weight: normal; font-weight: normal;
padding-right: 5px; padding-right: 5px;