|
|
|
|
@ -1,46 +1,62 @@ |
|
|
|
|
<template> |
|
|
|
|
<view class="home"> |
|
|
|
|
<!-- <page-head title="待排查任务" :warnNum='1' :isFixed="true" :isRight="true"></page-head> --> |
|
|
|
|
<!-- 轮播图 --> |
|
|
|
|
<view class="swiper-container"> |
|
|
|
|
<swiper :indicator-dots="true" :autoplay="true" :interval="4000" :duration="500"> |
|
|
|
|
<swiper-item v-for="(item, index) in swiperList" :key="index"> |
|
|
|
|
<image :src="item.imgurl" class="swiper-image"></image> |
|
|
|
|
</swiper-item> |
|
|
|
|
</swiper> |
|
|
|
|
<view id="page"> |
|
|
|
|
<view class="header"> |
|
|
|
|
<view class="title">道路交通安全隐患</view> |
|
|
|
|
<view class="title">排查助手</view> |
|
|
|
|
<view class="desc">洞察隐患 智能守护 科技之眼照亮安全之路</view> |
|
|
|
|
<view class="total Flex Flex_C_S-B PositionR"> |
|
|
|
|
<view class="left Flex"> |
|
|
|
|
<view class="info"> |
|
|
|
|
<view class="name">待办</view> |
|
|
|
|
<view class="number">42</view> |
|
|
|
|
</view> |
|
|
|
|
<image style="width: 160rpx" mode="widthFix" src="../../static/image/need.png" class="need"></image> |
|
|
|
|
<view class="bottom PositionA Flex Flex_C_S-A TextCenter blur"> |
|
|
|
|
<view class="item Flex_C_S-Center"> |
|
|
|
|
<text>超期</text> |
|
|
|
|
<text style="margin-left: 10rpx">17</text> |
|
|
|
|
</view> |
|
|
|
|
<view class="item Flex_C_S-Center"> |
|
|
|
|
<text>临期</text> |
|
|
|
|
<text style="margin-left: 10rpx">25</text> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="data"> |
|
|
|
|
<view class="left"> |
|
|
|
|
<image src="/static/home/pend.png" mode="" class="pend"></image> |
|
|
|
|
</view> |
|
|
|
|
<view class="right"> |
|
|
|
|
<view class="imgBox"> |
|
|
|
|
<image src="/static/home/month.png" mode="" class="img" ></image> |
|
|
|
|
<view class="current_mouth Flex Flex_C_S-B blur"> |
|
|
|
|
<image style="width: 80rpx" mode="widthFix" src="../../static/image/mouth.png" class="video"></image> |
|
|
|
|
<text class="name">本月上报</text> |
|
|
|
|
<text class="number">18</text> |
|
|
|
|
</view> |
|
|
|
|
<view class="imgBox"> |
|
|
|
|
<image src="/static/home/finish.png" mode="" class="img"></image> |
|
|
|
|
<view class="finish Flex Flex_C_S-B blur"> |
|
|
|
|
<image style="width: 80rpx" mode="widthFix" src="../..//static/image/finish.png" class="video"></image> |
|
|
|
|
<text class="name">已完成</text> |
|
|
|
|
<text class="number">12800</text> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
</view> |
|
|
|
|
|
|
|
|
|
<view class="knowContent" @click="goToKnowledge"> |
|
|
|
|
<image src="/static/know.png" mode="" class="know"></image> |
|
|
|
|
</view> |
|
|
|
|
<view class="pendding"> |
|
|
|
|
待办任务 |
|
|
|
|
<view class="con"> |
|
|
|
|
<text>交通隐患排查知识库</text> |
|
|
|
|
</view> |
|
|
|
|
<view class="Width100 Box BorderBox"> |
|
|
|
|
<view class="list_title">待办任务</view> |
|
|
|
|
<view class="Content MarginAuto BorderBox"> |
|
|
|
|
<no-data v-if="isEmpty" /> |
|
|
|
|
<view v-else class="List Width100 BorderBox"> |
|
|
|
|
<view class="Unit FontBold BorderBox Width100 MarginT_30rpx BG_FFFFFF" |
|
|
|
|
v-for="item in list" :key='item.id' @click='handleClick(item)'> |
|
|
|
|
<image class="imgleft" :src="item.imgurl" mode="widthFix"></image> |
|
|
|
|
<view class="right"> |
|
|
|
|
<view class="title">{{ item.title }}</view> |
|
|
|
|
<view class="type"> |
|
|
|
|
<text>排查</text> |
|
|
|
|
<text>超期2天</text> |
|
|
|
|
</view> |
|
|
|
|
<view class="ListBox"> |
|
|
|
|
<view class="ListItem" v-for="(item,index) in data" @click="handleDetail(item)"> |
|
|
|
|
<view class="isTime" :style="{ backgroundColor: item.isTime == 0 ? '#cc2936' : '#e68a0b' }">{{item.isTime==0?'超期':'临期'}} </view> |
|
|
|
|
<image :src="item.imgurl" mode="" class="car"></image> |
|
|
|
|
<view class="textBox"> |
|
|
|
|
<view class="toptext"> |
|
|
|
|
{{item.title}} |
|
|
|
|
</view> |
|
|
|
|
<view class="bottomText"> |
|
|
|
|
<text class="paicha">{{item.paicha}} </text> |
|
|
|
|
<text>{{item.createTime}}</text> |
|
|
|
|
<view class="trapezoidal"> |
|
|
|
|
超期 |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
@ -49,292 +65,308 @@ |
|
|
|
|
</template> |
|
|
|
|
|
|
|
|
|
<script> |
|
|
|
|
export default { |
|
|
|
|
import NoData from "../../components/no-data/index.vue"; |
|
|
|
|
export default { |
|
|
|
|
// 组件 |
|
|
|
|
components: { |
|
|
|
|
NoData |
|
|
|
|
}, |
|
|
|
|
data() { |
|
|
|
|
return { |
|
|
|
|
title: '下拉刷新 + 加载更多', |
|
|
|
|
data: [{ //window.PCRWList || |
|
|
|
|
id: 12121212, |
|
|
|
|
title: 'G228火炬路与S503岙东路', |
|
|
|
|
// 公用的js |
|
|
|
|
bgUrl1: '', // 登录信息背景图 |
|
|
|
|
list: [ |
|
|
|
|
{ |
|
|
|
|
id: 1, |
|
|
|
|
title: 'G228火炬路与S503岙东路路', |
|
|
|
|
roadCode: 123, |
|
|
|
|
roadName: 'G228火炬路与S503岙东路', |
|
|
|
|
imgurl: '/static/car.png', |
|
|
|
|
createTime: '超期2天', //2024-10-05 |
|
|
|
|
imgurl: '/static/imge.png', |
|
|
|
|
createTime: '2024-10-05', |
|
|
|
|
deptName: '支队级', |
|
|
|
|
sessionId: 12121212, |
|
|
|
|
paicha:"排查", |
|
|
|
|
isTime:0 |
|
|
|
|
sessionId: 12121212 |
|
|
|
|
}, |
|
|
|
|
{ //window.PCRWList || |
|
|
|
|
id: 37020017407, |
|
|
|
|
title: '金水路与合川路事故多发点段', |
|
|
|
|
{ |
|
|
|
|
id: 2, |
|
|
|
|
title: 'G228火炬路与S503岙东路路', |
|
|
|
|
roadCode: 123, |
|
|
|
|
roadName: '金水路与合川路', |
|
|
|
|
imgurl: '/static/car.png', |
|
|
|
|
createTime: '剩余2天', |
|
|
|
|
roadName: 'G228火炬路与S503岙东路', |
|
|
|
|
imgurl: '/static/imge.png', |
|
|
|
|
createTime: '2024-10-05', |
|
|
|
|
deptName: '支队级', |
|
|
|
|
sessionId: 37020017407, |
|
|
|
|
paicha:"排查", |
|
|
|
|
isTime:1 |
|
|
|
|
sessionId: 12121212 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
id: 37020017404, |
|
|
|
|
title: '金水路与合川路事故多发点段', |
|
|
|
|
id: 3, |
|
|
|
|
title: 'G228火炬路与S503岙东路路', |
|
|
|
|
roadCode: 123, |
|
|
|
|
roadName: '金水路与合川路', |
|
|
|
|
imgurl: '/static/car.png', |
|
|
|
|
createTime: '超期2天', |
|
|
|
|
roadName: 'G228火炬路与S503岙东路', |
|
|
|
|
imgurl: '/static/imge.png', |
|
|
|
|
createTime: '2024-10-05', |
|
|
|
|
deptName: '支队级', |
|
|
|
|
sessionId: 37020017404, |
|
|
|
|
paicha:"排查", |
|
|
|
|
isTime:1 |
|
|
|
|
}, |
|
|
|
|
], |
|
|
|
|
loadMoreText: "加载中...", |
|
|
|
|
showLoadMore: false, |
|
|
|
|
max: 0, |
|
|
|
|
swiperList: [{ |
|
|
|
|
imgurl: '/static/banner/1.jpg' |
|
|
|
|
sessionId: 12121212 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
imgurl: '/static/banner/2.jpg' |
|
|
|
|
id: 4, |
|
|
|
|
title: 'G228火炬路与S503岙东路路', |
|
|
|
|
roadCode: 123, |
|
|
|
|
roadName: 'G228火炬路与S503岙东路', |
|
|
|
|
imgurl: '/static/imge.png', |
|
|
|
|
createTime: '2024-10-05', |
|
|
|
|
deptName: '支队级', |
|
|
|
|
sessionId: 12121212 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
imgurl: '/static/banner/3.jpg' |
|
|
|
|
id: 5, |
|
|
|
|
title: 'G228火炬路与S503岙东路路', |
|
|
|
|
roadCode: 123, |
|
|
|
|
roadName: 'G228火炬路与S503岙东路', |
|
|
|
|
imgurl: '/static/imge.png', |
|
|
|
|
createTime: '2024-10-05', |
|
|
|
|
deptName: '支队级', |
|
|
|
|
sessionId: 12121212 |
|
|
|
|
}, |
|
|
|
|
{ |
|
|
|
|
imgurl: '/static/banner/4.jpg' |
|
|
|
|
} |
|
|
|
|
] |
|
|
|
|
], |
|
|
|
|
isEmpty: false, |
|
|
|
|
isMore: true, |
|
|
|
|
page: 1, |
|
|
|
|
tab: 1 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
onLoad() { |
|
|
|
|
this.initData(); |
|
|
|
|
// 页面加载 |
|
|
|
|
onLoad(e) { |
|
|
|
|
this.getList() |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
onUnload() { |
|
|
|
|
// this.max = 0, |
|
|
|
|
// this.data = [], |
|
|
|
|
// this.loadMoreText = "加载更多", |
|
|
|
|
// this.showLoadMore = false; |
|
|
|
|
}, |
|
|
|
|
onReachBottom() { |
|
|
|
|
// console.log("onReachBottom"); |
|
|
|
|
// if (this.max > 40) { |
|
|
|
|
// this.loadMoreText = "没有更多数据了!" |
|
|
|
|
// return; |
|
|
|
|
// 计算属性 |
|
|
|
|
computed: {}, |
|
|
|
|
// 方法 |
|
|
|
|
methods: { |
|
|
|
|
getList() { |
|
|
|
|
let datas = { |
|
|
|
|
limit: 10, |
|
|
|
|
page: 1, |
|
|
|
|
} |
|
|
|
|
// this.$request.globalRequest('/xxxxxxxx', datas, 'GET').then(res => { |
|
|
|
|
// if (res.code == 0) { |
|
|
|
|
// if (res.data.total === 0) { |
|
|
|
|
// this.isEmpty = true; |
|
|
|
|
// return false |
|
|
|
|
// } |
|
|
|
|
// this.list.push(...res.data.list) |
|
|
|
|
// if (this.list.length >= res.data.total) { |
|
|
|
|
// this.isMore = false |
|
|
|
|
// } |
|
|
|
|
// this.showLoadMore = true; |
|
|
|
|
// setTimeout(() => { |
|
|
|
|
// this.setListData(); |
|
|
|
|
// }, 300); |
|
|
|
|
// } else { |
|
|
|
|
// this.$.toast(res.msg) |
|
|
|
|
// } |
|
|
|
|
// }) |
|
|
|
|
}, |
|
|
|
|
onPullDownRefresh() { |
|
|
|
|
console.log('onPullDownRefresh'); |
|
|
|
|
this.initData(); |
|
|
|
|
handleClick(row) { |
|
|
|
|
console.log(row) |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
goToKnowledge() { |
|
|
|
|
uni.navigateTo({ |
|
|
|
|
url: '/pages/home/knowledge' |
|
|
|
|
}) |
|
|
|
|
// 跳转页面 |
|
|
|
|
skipPage(even) { |
|
|
|
|
// this.$.open(even) |
|
|
|
|
}, |
|
|
|
|
initData() { |
|
|
|
|
// setTimeout(() => { |
|
|
|
|
// this.max = 0; |
|
|
|
|
// this.data = []; |
|
|
|
|
// let data = []; |
|
|
|
|
// this.max += 20; |
|
|
|
|
// for (var i = this.max - 19; i < this.max + 1; i++) { |
|
|
|
|
// data.push(i) |
|
|
|
|
// } |
|
|
|
|
// this.data = this.data.concat(data); |
|
|
|
|
// uni.stopPullDownRefresh(); |
|
|
|
|
// }, 300); |
|
|
|
|
}, |
|
|
|
|
setListData() { |
|
|
|
|
// let data = []; |
|
|
|
|
// this.max += 10; |
|
|
|
|
// for (var i = this.max - 9; i < this.max + 1; i++) { |
|
|
|
|
// data.push(i) |
|
|
|
|
// } |
|
|
|
|
// this.data = this.data.concat(data); |
|
|
|
|
onReady() {}, |
|
|
|
|
// 页面卸载 |
|
|
|
|
onUnload() { |
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
// 跳转到详情页 |
|
|
|
|
handleDetail(item) { |
|
|
|
|
this.$store.commit('setItemMessage', item) |
|
|
|
|
uni.navigateTo({ |
|
|
|
|
// url: `/pages/home/detail?params=${encodeURIComponent(JSON.stringify(item))}` |
|
|
|
|
url: '/pages/home/detail' |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
// 触发下拉刷新 |
|
|
|
|
onPullDownRefresh() { |
|
|
|
|
// 延迟关闭刷新动画 |
|
|
|
|
setTimeout(() => { |
|
|
|
|
uni.stopPullDownRefresh(); |
|
|
|
|
}, 1500); |
|
|
|
|
}, |
|
|
|
|
// 页面上拉触底事件的处理函数 |
|
|
|
|
onReachBottom() { |
|
|
|
|
if (this.isMore) { |
|
|
|
|
this.page++ |
|
|
|
|
this.getList() |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
|
.home { |
|
|
|
|
width: 100%; |
|
|
|
|
.data{ |
|
|
|
|
display:flex; |
|
|
|
|
background-color: #e6ecf4; |
|
|
|
|
height:300rpx; |
|
|
|
|
padding:10rpx 10rpx 20rpx 10px; |
|
|
|
|
.left{ |
|
|
|
|
flex:1; |
|
|
|
|
height: 300rpx; |
|
|
|
|
.pend{ |
|
|
|
|
width:100%; |
|
|
|
|
height:300rpx; |
|
|
|
|
border-radius:10rpx; |
|
|
|
|
over-flow:hidden; |
|
|
|
|
// margin:0 5rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.right{ |
|
|
|
|
flex:1; |
|
|
|
|
display:flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
.imgBox{ |
|
|
|
|
width: 100%; |
|
|
|
|
height:100%; |
|
|
|
|
.img{ |
|
|
|
|
margin:0 5rpx; |
|
|
|
|
height:140rpx; |
|
|
|
|
width: 100%; |
|
|
|
|
border-radius:10rpx; |
|
|
|
|
over-flow:hidden; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.knowContent{ |
|
|
|
|
height:268rpx; |
|
|
|
|
// width: 100%; |
|
|
|
|
padding:0 10rpx; |
|
|
|
|
background-color: #e6ecf4; |
|
|
|
|
<style> |
|
|
|
|
</style> |
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
page { |
|
|
|
|
background: #F6F8FA; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.know{ |
|
|
|
|
width:100%; |
|
|
|
|
height:220rpx; |
|
|
|
|
border-radius:20rpx; |
|
|
|
|
.header { |
|
|
|
|
background: url("../../static/image/home_bg.png") no-repeat; |
|
|
|
|
background-size: cover; |
|
|
|
|
height: 500rpx; |
|
|
|
|
color: #FFFFFF; |
|
|
|
|
padding:60rpx 20rpx 20rpx; |
|
|
|
|
.title { |
|
|
|
|
font-family: Tensentype MeiHeiJ, Tensentype MeiHeiJ; |
|
|
|
|
font-weight: bold; |
|
|
|
|
font-size: 24px; |
|
|
|
|
line-height: 28px; |
|
|
|
|
letter-spacing: 2px; |
|
|
|
|
text-shadow: 0px 4px 0px rgba(255,255,255,0.16); |
|
|
|
|
text-align: left; |
|
|
|
|
font-style: normal; |
|
|
|
|
text-transform: none; |
|
|
|
|
} |
|
|
|
|
.desc { |
|
|
|
|
margin-top: 20rpx; |
|
|
|
|
} |
|
|
|
|
.total { |
|
|
|
|
margin-top: 40rpx; |
|
|
|
|
.number { |
|
|
|
|
font-size: 20px; |
|
|
|
|
font-weight: bold; |
|
|
|
|
color: #363F4D; |
|
|
|
|
} |
|
|
|
|
.name { |
|
|
|
|
font-size: 16px; |
|
|
|
|
color: #363F4D; |
|
|
|
|
font-weight: bold; |
|
|
|
|
} |
|
|
|
|
.left { |
|
|
|
|
width: 40%; |
|
|
|
|
height: 100%; |
|
|
|
|
padding: 20rpx 20rpx 70rpx; |
|
|
|
|
border-radius: 10rpx; |
|
|
|
|
background: linear-gradient( 180deg, #F0D9B4 0%, #F6F6F6 100%); |
|
|
|
|
overflow: hidden; |
|
|
|
|
.info { |
|
|
|
|
padding-left: 20rpx; |
|
|
|
|
padding-top: 20rpx; |
|
|
|
|
flex: 1; |
|
|
|
|
.number { |
|
|
|
|
font-size: 20px; |
|
|
|
|
} |
|
|
|
|
.name { |
|
|
|
|
font-size: 18px; |
|
|
|
|
} |
|
|
|
|
.pendding { |
|
|
|
|
// margin:30rpx 0 ; |
|
|
|
|
font-size: 40rpx; |
|
|
|
|
height:85rpx; |
|
|
|
|
line-height: 85rpx; |
|
|
|
|
padding-left:20rpx; |
|
|
|
|
background-color: #e6ecf4; |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
.ListBox{ |
|
|
|
|
background-color: #e6ecf4; |
|
|
|
|
.ListItem{ |
|
|
|
|
height:180rpx; |
|
|
|
|
background-color: #fff; |
|
|
|
|
display:flex; |
|
|
|
|
margin:13rpx 0; |
|
|
|
|
align-items:center; |
|
|
|
|
padding:20rpx; |
|
|
|
|
position:relative; |
|
|
|
|
.isTime{ |
|
|
|
|
position:absolute; |
|
|
|
|
right:0; |
|
|
|
|
top:-5rpx; |
|
|
|
|
width: 100rpx; |
|
|
|
|
height:45rpx; |
|
|
|
|
color:#fff; |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
font-size:32rpx |
|
|
|
|
// background-color: #fff; |
|
|
|
|
} |
|
|
|
|
.car{ |
|
|
|
|
width: 200rpx; |
|
|
|
|
height:160rpx |
|
|
|
|
.bottom { |
|
|
|
|
bottom: 0; |
|
|
|
|
border-radius:0 0 10rpx 10px; |
|
|
|
|
width: calc(36% + 40rpx); |
|
|
|
|
left: 0; |
|
|
|
|
font-size: 16px; |
|
|
|
|
text-align: center; |
|
|
|
|
height: 80rpx; |
|
|
|
|
line-height: 80rpx; |
|
|
|
|
color: #363F4D; |
|
|
|
|
} |
|
|
|
|
.textBox{ |
|
|
|
|
padding-left:30rpx; |
|
|
|
|
.toptext{ |
|
|
|
|
font-size:35rpx; |
|
|
|
|
font-weight:600; |
|
|
|
|
margin-bottom:20rpx |
|
|
|
|
} |
|
|
|
|
.bottomText{ |
|
|
|
|
.paicha{ |
|
|
|
|
margin-right:30rpx |
|
|
|
|
.right { |
|
|
|
|
flex: 1; |
|
|
|
|
padding:0 20rpx; |
|
|
|
|
margin-left: 20rpx; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
.current_mouth { |
|
|
|
|
margin-bottom: 20rpx; |
|
|
|
|
} |
|
|
|
|
.current_mouth,.finish { |
|
|
|
|
flex: 1; |
|
|
|
|
border-radius: 10rpx; |
|
|
|
|
padding: 20rpx; |
|
|
|
|
width: 100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.imgleft { |
|
|
|
|
width: 80rpx; |
|
|
|
|
margin-right: 20rpx; |
|
|
|
|
max-height: 100%; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.swiper-container { |
|
|
|
|
width: 100%; |
|
|
|
|
// height: 300rpx; // |
|
|
|
|
// margin-top: 20rpx; // |
|
|
|
|
// background-color: #2663bf |
|
|
|
|
} |
|
|
|
|
.img { |
|
|
|
|
width: 40rpx; |
|
|
|
|
height: 40rpx; |
|
|
|
|
margin-left: 30rpx; |
|
|
|
|
} |
|
|
|
|
.trapezoidal { |
|
|
|
|
position: relative; |
|
|
|
|
display: inline-block; |
|
|
|
|
min-width: 2em; |
|
|
|
|
text-align: center; |
|
|
|
|
padding: 3rpx 20rpx 3rpx 18rpx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.swiper-image { |
|
|
|
|
.trapezoidal::before, |
|
|
|
|
.trapezoidal::after { |
|
|
|
|
content: ''; |
|
|
|
|
position: absolute; |
|
|
|
|
top: 0; |
|
|
|
|
left: 0%; |
|
|
|
|
width: 100%; |
|
|
|
|
height: 300rpx; |
|
|
|
|
// object-fit: cover; |
|
|
|
|
height: 100%; |
|
|
|
|
border-radius: 0rpx 0 0 0; |
|
|
|
|
background: #FF1111; |
|
|
|
|
z-index: -1; |
|
|
|
|
transform-origin: bottom; |
|
|
|
|
transform: skew(18deg); |
|
|
|
|
border: 0rpx solid #333; |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
.trapezoidal::after { |
|
|
|
|
left: auto; |
|
|
|
|
right: 0; |
|
|
|
|
transform: skew(-0deg); |
|
|
|
|
border-radius: 0 0rpx 0 0; |
|
|
|
|
background-color: #FF1111; |
|
|
|
|
border-left: 0 none; |
|
|
|
|
} |
|
|
|
|
.list_title { |
|
|
|
|
font-size: 20px; |
|
|
|
|
background: linear-gradient( 180deg, #FFFFFF 0%, rgba(255,255,255,0) 100%); |
|
|
|
|
border-radius: 24px 24px 0px 0px; |
|
|
|
|
padding: 20rpx 30rpx 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.uni-padding-wrap { |
|
|
|
|
height: 60vh; |
|
|
|
|
.uni-list-item{ |
|
|
|
|
margin:20px 0; |
|
|
|
|
height:190rpx |
|
|
|
|
} |
|
|
|
|
.Box { |
|
|
|
|
.Content { |
|
|
|
|
width: calc(100% - 48rpx); |
|
|
|
|
padding-bottom: 100rpx; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.content { |
|
|
|
|
flex: 1; |
|
|
|
|
.Unit { |
|
|
|
|
padding: 24rpx; |
|
|
|
|
display: flex; |
|
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
|
|
justify-content: space-between; |
|
|
|
|
align-items: center; |
|
|
|
|
position: relative; |
|
|
|
|
box-shadow: 1px 1px 3px #ccc; |
|
|
|
|
.trapezoidal { |
|
|
|
|
position: absolute; |
|
|
|
|
top: -4px; |
|
|
|
|
right: 0; |
|
|
|
|
color: #ffffff; |
|
|
|
|
font-size: 14px; |
|
|
|
|
font-weight: normal; |
|
|
|
|
z-index: 1; |
|
|
|
|
} |
|
|
|
|
image { |
|
|
|
|
width: 140rpx; |
|
|
|
|
} |
|
|
|
|
.right { |
|
|
|
|
flex: 1; |
|
|
|
|
padding-left: 30rpx; |
|
|
|
|
.title { |
|
|
|
|
font-size: 32rpx; |
|
|
|
|
width: 100%; |
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
overflow: hidden; |
|
|
|
|
white-space: nowrap; |
|
|
|
|
font-size: 16px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.bottom { |
|
|
|
|
display: flex; |
|
|
|
|
|
|
|
|
|
.text { |
|
|
|
|
.type { |
|
|
|
|
font-size: 14px; |
|
|
|
|
color: #666; |
|
|
|
|
font-weight: normal; |
|
|
|
|
text { |
|
|
|
|
margin-right: 20rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.right { |
|
|
|
|
height: 100%; |
|
|
|
|
display: flex; |
|
|
|
|
align-items: center; |
|
|
|
|
margin-left: 10px; |
|
|
|
|
|
|
|
|
|
.btn { |
|
|
|
|
width: 120rpx; |
|
|
|
|
height: 70rpx; |
|
|
|
|
line-height: 70rpx; |
|
|
|
|
font-size: 28rpx; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
ethan
2 years ago
