XiXingWL/AnHanNET-UniAPP
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

增加商品列表 视频列表 文章列表等样式代码

Browse Source 
Signed-off-by: YangWork <yang@xixingwl.cn>
This commit is contained in:
YangWork
2023-02-15 17:52:06 +08:00
parent 2ad0f3495b
commit 1a0c4482a3
8 changed files with 1806 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
pages/tabbar/videos/videos.vue
View File

@@ -1,6 +1,82 @@
<template>
<view>
<uni-list>
<uni-list-item direction="column">
<template v-slot:header>
<view class="uni-title">垂直排列的大图模式列表， header 内容为插槽自定义的内容</view>
<view class="uni-thumb uni-content list-picture">
<image src="/static//user/back.jpg" mode="aspectFill"></image>
</view>
</template>
<template v-slot:footer>
<view class="uni-footer">
<text class="uni-footer-text">评论</text>
<text class="uni-footer-text">点赞</text>
<text class="uni-footer-text">分享</text>
</view>
</template>
</uni-list-item>
<uni-list-item direction="column">
<template v-slot:header>
<view class="uni-title">垂直排列的大图模式列表， header 内容为插槽自定义的内容</view>
<view class="uni-thumb uni-content list-picture">
<image src="/static//user/back.jpg" mode="aspectFill"></image>
</view>
</template>
<template v-slot:footer>
<view class="uni-footer">
<text class="uni-footer-text">评论</text>
<text class="uni-footer-text">点赞</text>
<text class="uni-footer-text">分享</text>
</view>
</template>
</uni-list-item>
<uni-list-item direction="column">
<template v-slot:header>
<view class="uni-title">垂直排列的大图模式列表， header 内容为插槽自定义的内容</view>
<view class="uni-thumb uni-content list-picture">
<image src="/static//user/back.jpg" mode="aspectFill"></image>
</view>
</template>
<template v-slot:footer>
<view class="uni-footer">
<text class="uni-footer-text">评论</text>
<text class="uni-footer-text">点赞</text>
<text class="uni-footer-text">分享</text>
</view>
</template>
</uni-list-item>
<uni-list-item direction="column">
<template v-slot:header>
<view class="uni-title">垂直排列的大图模式列表， header 内容为插槽自定义的内容</view>
<view class="uni-thumb uni-content list-picture">
<image src="/static//user/back.jpg" mode="aspectFill"></image>
</view>
</template>
<template v-slot:footer>
<view class="uni-footer">
<text class="uni-footer-text">评论</text>
<text class="uni-footer-text">点赞</text>
<text class="uni-footer-text">分享</text>
</view>
</template>
</uni-list-item>
<uni-list-item direction="column">
<template v-slot:header>
<view class="uni-title">垂直排列的大图模式列表， header 内容为插槽自定义的内容</view>
<view class="uni-thumb uni-content list-picture">
<image src="/static//user/back.jpg" mode="aspectFill"></image>
</view>
</template>
<template v-slot:footer>
<view class="uni-footer">
<text class="uni-footer-text">评论</text>
<text class="uni-footer-text">点赞</text>
<text class="uni-footer-text">分享</text>
</view>
</template>
</uni-list-item>
</uni-list>
</view>
</template>
@@ -8,15 +84,76 @@
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style>
<style lang="scss">
@import '@/common/uni-ui.scss';
page {
display: flex;
flex-direction: column;
box-sizing: border-box;
background-color: #efeff4;
min-height: 100%;
height: auto;
}
.tips {
color: #67c23a;
font-size: 14px;
line-height: 40px;
text-align: center;
background-color: #f0f9eb;
height: 0;
opacity: 0;
transform: translateY(-100%);
transition: all 0.3s;
}
.tips-ani {
transform: translateY(0);
height: 40px;
opacity: 1;
}
.content {
width: 100%;
display: flex;
}
.list-picture {
width: 100%;
height: 145px;
}
.thumb-image {
width: 100%;
height: 100%;
}
.ellipsis {
display: flex;
overflow: hidden;
}
.uni-ellipsis-1 {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.uni-ellipsis-2 {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>