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

3
App.vue
View File

@@ -130,6 +130,8 @@
.warp {
margin: 10rpx 15rpx;
background: linear-gradient(to bottom right, pink, #a900ff7a, pink);
}
.Grid {
@@ -141,6 +143,7 @@
border-radius: 15rpx;
padding-top: 10rpx;
padding-bottom: 10rpx;
background-color: transparent;
.Grid-Item {
width: 25%;

120
common/uni-ui.scss Normal file
View File

@@ -0,0 +1,120 @@
.uni-flex {
display: flex;
}
.uni-flex-row {
@extend .uni-flex;
flex-direction: row;
box-sizing: border-box;
}
.uni-flex-column {
@extend .uni-flex;
flex-direction: column;
}
.uni-color-gary {
color: #3b4144;
}
/* 标题 */
.uni-title {
display: flex;
margin-bottom: $uni-spacing-col-base;
font-size: $uni-font-size-lg;
font-weight: bold;
color: #3b4144;
}
.uni-title-sub {
display: flex;
// margin-bottom: $uni-spacing-col-base;
font-size: $uni-font-size-base;
font-weight: 500;
color: #3b4144;
}
/* 描述 额外文本 */
.uni-note {
margin-top: 10px;
color: #999;
font-size: $uni-font-size-sm;
}
/* 列表内容 */
.uni-list-box {
@extend .uni-flex-row;
flex: 1;
margin-top: 10px;
}
/* 略缩图 */
.uni-thumb {
flex-shrink: 0;
margin-right: $uni-spacing-row-base;
width: 125px;
height: 75px;
border-radius: $uni-border-radius-lg;
overflow: hidden;
border: 1px #f5f5f5 solid;
image {
width: 100%;
height: 100%;
}
}
.uni-media-box {
@extend .uni-flex-row;
// margin-bottom: $uni-spacing-col-base;
border-radius: $uni-border-radius-lg;
overflow: hidden;
.uni-thumb {
margin: 0;
margin-left: 4px;
flex-shrink: 1;
width: 33%;
border-radius:0;
&:first-child {
margin: 0;
}
}
}
/* 内容 */
.uni-content {
@extend .uni-flex-column;
justify-content: space-between;
}
/* 列表footer */
.uni-footer {
@extend .uni-flex-row;
justify-content: space-between;
margin-top: $uni-spacing-col-lg;
}
.uni-footer-text {
font-size: $uni-font-size-sm;
color: $uni-text-color-grey;
margin-left: 5px;
}
/* 标签 */
.uni-tag {
flex-shrink: 0;
padding: 0 5px;
border: 1px $uni-border-color solid;
margin-right: $uni-spacing-row-sm;
border-radius: $uni-border-radius-base;
background: $uni-bg-color-grey;
color: $uni-text-color;
font-size: $uni-font-size-sm;
}
/* 链接 */
.uni-link {
margin-left: 10px;
color: $uni-text-color;
text-decoration: underline;
}

9
pages.json
View File

@@ -12,7 +12,8 @@
"path": "pages/tabbar/home/home",
"style": {
"navigationBarTitleText": "主页",
"enablePullDownRefresh": false
"enablePullDownRefresh": false,
"navigationStyle": "custom"
}
},{
"path" : "pages/tabbar/videos/videos",
@@ -75,7 +76,11 @@
"navigationStyle": "custom"
}
}]
}],
},{
"root": "cpzs",
"pages": []
}
],
"tabBar": {
"list": [{

288
pages/tabbar/dynamics/dynamics.vue
View File

@@ -1,22 +1,302 @@
<template>
<view>
<uni-list>
<uni-list>
<!-- 垂直排列，略缩图显示大图 -->
<uni-list-item direction="column" note="Dcloud 128评论 21 赞">
<template v-slot:header>
<view class="uni-title">垂直排列的大图模式列表， header 内容为插槽自定义的内容</view>
<view class="uni-thumb uni-content list-picture">
<image src="/static/logo.png" mode="aspectFill"></image>
</view>
</template>
</uni-list-item>
<!-- 垂直排列，图文混排 -->
<uni-list-item direction="column">
<template v-slot:header>
<view class="uni-title">垂直排列的图文混排列表，内容通过 body 插槽实现，底部通过 footer 插槽实现完全自定样式</view>
</template>
<template v-slot:body>
<view class="uni-list-box">
<view class="uni-thumb">
<image src="/static/logo.png" mode="aspectFill"></image>
</view>
<view class="uni-content">
<view class="uni-title-sub uni-ellipsis-2">这里是列表的副标题，最多可以显示两行，多余文字会隐藏并显示省略号</view>
<view class="uni-note">Dcloud 128评论 21 赞</view>
</view>
</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" title="" note="Dcloud 128评论 21 赞">
<template v-slot:header>
<view class="uni-title">垂直排列的多图列表，多图通过 body 插槽实现完全自定样式</view>
</template>
<template v-slot:body>
<view class="content uni-media-box">
<image v-for="img in 3" :key="img" class="uni-thumb" src="/static/logo.png"
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 title="水平排列的左图右文列表，图片通过 header 插槽完全自定义" note="Dcloud 128评论 21 赞">
<template v-slot:header>
<view class="uni-thumb">
<image src="/static/logo.png" mode="aspectFill"></image>
</view>
</template>
</uni-list-item>
<!-- 水平排列，右图左文 -->
<uni-list-item title="水平排列的右图左文列表，图片通过 footer 插槽完全自定义" note="Dcloud 128评论 21 赞">
<template v-slot:footer>
<view class="uni-thumb" style="margin: 0;">
<image src="/static/logo.png" mode="aspectFill"></image>
</view>
</template>
</uni-list-item>
<!-- 垂直排列，无略缩图，主标题+副标题显示 -->
<uni-list-item direction="column">
<template v-slot:header>
<view class="uni-title">垂直排列的无图列表，现在主标题+副标题</view>
</template>
<template v-slot:body>
<view class="uni-list-box">
<view class="uni-content">
<view class="uni-title-sub uni-ellipsis-2">这里是副标题 ，一般显示详情概览</view>
<view class="uni-note">Dcloud 128评论 21 赞</view>
</view>
</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>
</uni-list>
<!-- 通过 loadMore 组件实现上拉加载效果，如需自定义显示内容，可参考：https://ext.dcloud.net.cn/plugin?id=29 -->
<!-- <uni-load-more v-if="loading || options.status === 'noMore' " :status="options.status" /> -->
</view>
</template>
<script>
// mode = 1 垂直排列，略缩图显示大图
// mode = 2 垂直排列，图文混排
// mode = 3 垂直排列，略缩图显示多图
// mode = 4 水平排列，左图右文
// mode = 5 水平排列，右图左文
// mode = 6 垂直排列，无略缩图，主标题+副标题显示
export default {
components: {},
data() {
return {
}
// // 数据表名
// collection: 'opendb-news-articles',
// // 查询字段，多个字段用 , 分割
// field: '_id,mode,avatar,title,user_name,excerpt,last_modify_date',
formData: {
status: 'loading' // 加载状态
},
tipShow: false, // 是否显示顶部提示框
lists: [{
"id": 121375,
"post_id": "5310910",
"title": "为什么自动驾驶诉讼不断？",
"author_name": "未来汽车日报",
"cover": "https://img.36krcdn.com/20200411/v2_f497b1c414d5489791569b3ea99df33d_img_000",
"published_at": "2020-04-11 17:07:48",
"content": "",
"mode": 1
},
{
"id": 121374,
"post_id": "5310906",
"title": "2020数字中国创新大赛-数字政府赛道21强出炉，四大赛题紧贴政府数字化发展需求",
"author_name": "36氪深度服务",
"cover": "https://img.36krcdn.com/20200411/v2_16417a06088947debe0450950f8fc813_img_png",
"published_at": "2020-04-11 16:59:15",
"content": "",
"mode": 2
},
{
"id": 121373,
"post_id": "5310903",
"title": "地方政府救市哪家强？广州补贴上万元，广深杭新增指标超5万",
"author_name": "未来汽车日报",
"cover": "https://img.36krcdn.com/20200410/v2_6905947498bc4ec0af228afed409f771_img_png?x-oss-process=image/resize,m_mfit,w_520,h_300/crop,w_520,h_300,g_center",
"published_at": "2020-04-11 16:09:09",
"content": "",
"mode": 3
},
{
"id": 121372,
"post_id": "5310813",
"title": "救命呼吸机缺口难补！一文扒开供应链真相",
"author_name": "智东西",
"cover": "https://img.36krcdn.com/20200410/v2_86bbf8245f754be79f3386a82b385093_img_000",
"published_at": "2020-04-11 15:40:02",
"content": "",
"mode": 4
},
{
"id": 121371,
"post_id": "5309573",
"title": "每月节省32%的开支，我是怎么做到的？",
"author_name": "神译局",
"cover": "https://img.36krcdn.com/20200408/v2_c67c3edfe4b5446992b32fad93a44a75_img_png",
"published_at": "2020-04-11 14:48:02",
"content": "",
"mode": 5
},
{
"id": 121369,
"post_id": "5310859",
"title": "瓜子坚果双增长，但洽洽并不能高枕无忧",
"author_name": "资本侦探",
"cover": "https://img.36krcdn.com/20200411/v2_2204c6132432403184e43df22485545e_img_000?x-oss-process=image/resize,m_mfit,w_432,h_288/crop,w_432,h_288,g_center",
"published_at": "2020-04-11 14:23:00",
"content": "",
"mode": 6
},
{
"id": 121367,
"post_id": "5309137",
"title": "克服危机和压力，精神力量强大的人都有这5个习惯",
"author_name": "神译局",
"cover": "https://img.36krcdn.com/20200406/v2_d2c6a686b4074a1eb43603e67d6ba204_img_png",
"published_at": "2020-04-11 13:47:01",
"content": "",
"mode": 1
},
{
"id": 121365,
"post_id": "5310864",
"title": "神州租车找爹记",
"author_name": "PingWest品玩",
"cover": "https://img.36krcdn.com/20200411/v2_f497b1c414d5489791569b3ea99df33d_img_000",
"published_at": "2020-04-11 13:39:00",
"content": "",
"mode": 1
}
]
};
},
onLoad() {},
methods: {
load(data, ended) {
if (ended) {
this.formData.status = 'noMore'
}
}
},
/**
* 下拉刷新回调函数
*/
onPullDownRefresh() {
this.formData.status = 'more'
this.$refs.udb.loadData({
clear: true
}, () => {
this.tipShow = true
clearTimeout(this.timer)
this.timer = setTimeout(() => {
this.tipShow = false
}, 1000)
uni.stopPullDownRefresh()
})
},
/**
* 上拉加载回调函数
*/
onReachBottom() {
}
}
};
</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>

1253
pages/tabbar/home/home.vue
View File

File diff suppressed because it is too large Load Diff

2
pages/tabbar/messages/messages.vue
View File

@@ -1,6 +1,6 @@
<template>
<view>
<uni-nav-bar fixed="true">
<uni-nav-bar fixed="true" statusBar="true">
<block slot="left">
<view class="city">
<view>

21
pages/tabbar/my/my.vue
View File

@@ -2,14 +2,13 @@
<view>
<view class="warp warp1" style="">
<view class="user" style="">
<image class="user-avatar" mode="aspectFit" :src="userInfo.avatar"
style="background-image: ../../../static/avatar.png;"></image>
<view class="user-info">
<h2> {{userInfo.nickname}} </h2>
<text class="nickname"> {{userInfo.nickname}} </text>
<text> UID {{userInfo.uid}}</text>
<text> {{userInfo.account}}</text>
<text> 云深不知归处，爱你不会迷路</text>
</view>
<image class="user-avatar" mode="aspectFit" :src="userInfo.avatar"
style="background-image: ../../../static/avatar.png;"></image>
</view>
<view style="padding: 10rpx;"></view>
<view class="Grid">
@@ -41,9 +40,6 @@
<view style="padding: 10rpx;"></view>
<uni-list style="">
<uni-list-item title="列表左侧带略缩图"
thumb="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/460d46d0-4fcc-11eb-8ff1-d5dcf8779628.png"
thumb-size="sm" rightText="右侧文字" showArrow></uni-list-item>
<uni-list-item :showExtraIcon="true" :extraIcon="{color: '#4cd964',size: '25',type: 'gear'}"
title="列表左侧带扩展图标" clickable showArrow>
</uni-list-item>
@@ -119,12 +115,10 @@
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
padding-top: 180rpx;
padding: 180rpx 25rpx 25rpx 15rpx;
/* #ifdef H5 */
padding-top: 80rpx;
/* #endif */
padding-left: 15rpx;
padding-bottom: 25rpx;
// background-image: url(/static/user/back.jpg);
// background-size: 100% 100%;
// background: linear-gradient(pink,#a900ff7a, pink);
@@ -139,7 +133,12 @@
display: flex;
flex-direction: column;
justify-content: center;
padding-left: 45rpx;
padding-left: 25rpx;
.nickname{
font-size: 64rpx;
font-weight: 48rpx;
}
}
}
</style>

141
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>
@@ -17,6 +93,67 @@
}
</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>