suojin
/
hitap-chat
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

init

Browse Source
main
ethan 2 years ago
parent 0b1c126fbf
commit af6f7a8af3
7 changed files with 379 additions and 333 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      src/common/css.css
  2. 560
      src/pages/home/index.vue
  3. 21
      src/pages/investigation/index.vue
  4. BIN
      src/static/image/finish.png
  5. BIN
      src/static/image/home_bg.png
  6. BIN
      src/static/image/mouth.png
  7. BIN
      src/static/image/need.png

7
src/common/css.css
Unescape View File

@ -759,6 +759,13 @@ input,textarea,button{
line-height: 70rpx; line-height: 70rpx;
} }
.blur {
background-color: rgba(255, 255, 255, 0.2); /* 半透明背景 */
backdrop-filter: blur(10px); /* 背景模糊 */
-webkit-backdrop-filter: blur(10px); /* 兼容老版本 Safari */
}

560
src/pages/home/index.vue
Unescape View File

@ -1,46 +1,62 @@
<template> <template>
<view class="home"> <view id="page">
<!-- <page-head title="待排查任务" :warnNum='1' :isFixed="true" :isRight="true"></page-head> --> <view class="header">
<!-- 轮播图 --> <view class="title">道路交通安全隐患</view>
<view class="swiper-container"> <view class="title">排查助手</view>
<swiper :indicator-dots="true" :autoplay="true" :interval="4000" :duration="500"> <view class="desc">洞察隐患 智能守护 科技之眼照亮安全之路</view>
<swiper-item v-for="(item, index) in swiperList" :key="index"> <view class="total Flex Flex_C_S-B PositionR">
<image :src="item.imgurl" class="swiper-image"></image> <view class="left Flex">
</swiper-item> <view class="info">
</swiper> <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>
<view class="data">
<view class="left">
<image src="/static/home/pend.png" mode="" class="pend"></image>
</view> </view>
<view class="right"> <view class="right">
<view class="imgBox"> <view class="current_mouth Flex Flex_C_S-B blur">
<image src="/static/home/month.png" mode="" class="img" ></image> <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>
<view class="imgBox"> <view class="finish Flex Flex_C_S-B blur">
<image src="/static/home/finish.png" mode="" class="img"></image> <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>
</view> </view>
<view class="knowContent" @click="goToKnowledge">
<image src="/static/know.png" mode="" class="know"></image>
</view> </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>
<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>
<view class="bottomText"> <view class="trapezoidal">
<text class="paicha">{{item.paicha}} </text> 超期
<text>{{item.createTime}}</text> </view>
</view> </view>
</view> </view>
</view> </view>
@ -49,292 +65,308 @@
</template> </template>
<script> <script>
export default { import NoData from "../../components/no-data/index.vue";
export default {
// 组件
components: {
NoData
},
data() { data() {
return { return {
title: '下拉刷新 + 加载更多', // 公用的js
data: [{ //window.PCRWList || bgUrl1: '', // 登录信息背景图
id: 12121212, list: [
title: 'G228火炬路与S503岙东路', {
id: 1,
title: 'G228火炬路与S503岙东路路',
roadCode: 123, roadCode: 123,
roadName: 'G228火炬路与S503岙东路', roadName: 'G228火炬路与S503岙东路',
imgurl: '/static/car.png', imgurl: '/static/imge.png',
createTime: '超期2天', //2024-10-05 createTime: '2024-10-05',
deptName: '支队级', deptName: '支队级',
sessionId: 12121212, sessionId: 12121212
paicha:"排查",
isTime:0
}, },
{ //window.PCRWList || {
id: 37020017407, id: 2,
title: '金水路与合川路事故多发点段', title: 'G228火炬路与S503岙东路路',
roadCode: 123, roadCode: 123,
roadName: '金水路与合川路', roadName: 'G228火炬路与S503岙东路',
imgurl: '/static/car.png', imgurl: '/static/imge.png',
createTime: '剩余2天', createTime: '2024-10-05',
deptName: '支队级', deptName: '支队级',
sessionId: 37020017407, sessionId: 12121212
paicha:"排查",
isTime:1
}, },
{ {
id: 37020017404, id: 3,
title: '金水路与合川路事故多发点段', title: 'G228火炬路与S503岙东路路',
roadCode: 123, roadCode: 123,
roadName: '金水路与合川路', roadName: 'G228火炬路与S503岙东路',
imgurl: '/static/car.png', imgurl: '/static/imge.png',
createTime: '超期2天', createTime: '2024-10-05',
deptName: '支队级', deptName: '支队级',
sessionId: 37020017404, sessionId: 12121212
paicha:"排查",
isTime:1
},
],
loadMoreText: "加载中...",
showLoadMore: false,
max: 0,
swiperList: [{
imgurl: '/static/banner/1.jpg'
}, },
{ {
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() { computed: {},
// this.max = 0, // 方法
// this.data = [], methods: {
// this.loadMoreText = "加载更多", getList() {
// this.showLoadMore = false; let datas = {
}, limit: 10,
onReachBottom() { page: 1,
// console.log("onReachBottom"); }
// if (this.max > 40) { // this.$request.globalRequest('/xxxxxxxx', datas, 'GET').then(res => {
// this.loadMoreText = "没有更多数据了!" // if (res.code == 0) {
// return; // 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; // } else {
// setTimeout(() => { // this.$.toast(res.msg)
// this.setListData(); // }
// }, 300); // })
}, },
onPullDownRefresh() { handleClick(row) {
console.log('onPullDownRefresh'); console.log(row)
this.initData();
}, },
methods: { // 跳转页面
goToKnowledge() { skipPage(even) {
uni.navigateTo({ // this.$.open(even)
url: '/pages/home/knowledge'
})
}, },
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() { onReady() {},
// let data = []; // 页面卸载
// this.max += 10; onUnload() {
// for (var i = this.max - 9; i < this.max + 1; i++) {
// data.push(i)
// }
// this.data = this.data.concat(data);
}, },
// 跳转到详情页 // 触发下拉刷新
handleDetail(item) { onPullDownRefresh() {
this.$store.commit('setItemMessage', item) // 延迟关闭刷新动画
uni.navigateTo({ setTimeout(() => {
// url: `/pages/home/detail?params=${encodeURIComponent(JSON.stringify(item))}` uni.stopPullDownRefresh();
url: '/pages/home/detail' }, 1500);
}) },
} // 页面上拉触底事件的处理函数
} onReachBottom() {
if (this.isMore) {
this.page++
this.getList()
} }
},
}
</script> </script>
<style scoped lang="scss"> <style>
.home { </style>
width: 100%; <style lang="scss" scoped>
.data{ page {
display:flex; background: #F6F8FA;
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;
.know{ .header {
width:100%; background: url("../../static/image/home_bg.png") no-repeat;
height:220rpx; background-size: cover;
border-radius:20rpx; 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; 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{ .bottom {
width: 200rpx; bottom: 0;
height:160rpx 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{ .right {
.paicha{ flex: 1;
margin-right:30rpx 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 { .img {
width: 100%; width: 40rpx;
// height: 300rpx; // height: 40rpx;
// margin-top: 20rpx; // margin-left: 30rpx;
// background-color: #2663bf }
} .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%; width: 100%;
height: 300rpx; height: 100%;
// object-fit: cover; 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 { .Box {
height: 60vh; .Content {
.uni-list-item{ width: calc(100% - 48rpx);
margin:20px 0; padding-bottom: 100rpx;
height:190rpx
}
} }
.content { .Unit {
flex: 1; padding: 24rpx;
display: flex; 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 { .title {
font-size: 32rpx; font-size: 16px;
width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
} }
.type {
.bottom { font-size: 14px;
display: flex; color: #666;
font-weight: normal;
.text { text {
margin-right: 20rpx; 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> </style>

21
src/pages/investigation/index.vue
Unescape View File

@ -10,15 +10,15 @@
<view class="tab"> <view class="tab">
<view class="tab-item" :class="tab === 1 ? 'active' : ''" @click='tab = 1'> <view class="tab-item" :class="tab === 1 ? 'active' : ''" @click='tab = 1'>
<text>待办</text> <text>待办</text>
<text>200</text> <text class="number">200</text>
</view> </view>
<view class="tab-item" :class="tab === 2 ? 'active' : ''" @click='tab = 2'> <view class="tab-item" :class="tab === 2 ? 'active' : ''" @click='tab = 2'>
<text>正在办理</text> <text>正在办理</text>
<text>480</text> <text class="number">480</text>
</view> </view>
<view class="tab-item" :class="tab === 3 ? 'active' : ''" @click='tab = 3'> <view class="tab-item" :class="tab === 3 ? 'active' : ''" @click='tab = 3'>
<text>已完成</text> <text>已完成</text>
<text>182</text> <text class="number">182</text>
</view> </view>
</view> </view>
<view class="Content MarginAuto BorderBox"> <view class="Content MarginAuto BorderBox">
@ -220,7 +220,6 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
font-weight: bold;
font-size: 16px; font-size: 16px;
height: 44px; height: 44px;
background: #ffffff; background: #ffffff;
@ -233,25 +232,33 @@
line-height: 41px; line-height: 41px;
padding: 0 30rpx 0 30rpx; padding: 0 30rpx 0 30rpx;
border-bottom: 3px solid #fff; border-bottom: 3px solid #fff;
display: flex;
align-items: center;
&.active { &.active {
color: rgb(60, 109, 195); color: rgb(60, 109, 195);
border-color: rgb(60, 109, 195); border-color: rgb(60, 109, 195);
} }
.number {
font-weight: bold;
font-size: 18px;
margin-left: 10rpx;
}
} }
} }
.Box { .Box {
.Content { .Content {
width: calc(100% - 64rpx); width: calc(100% - 48rpx);
padding-bottom: 100rpx; padding-bottom: 100rpx;
} }
.Unit { .Unit {
padding: 36rpx; padding: 24rpx;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
position: relative; position: relative;
box-shadow: 1px 1px 3px #ccc;
.trapezoidal { .trapezoidal {
position: absolute; position: absolute;
top: -4px; top: -4px;
@ -262,7 +269,7 @@
z-index: 1; z-index: 1;
} }
image { image {
width: 160rpx; width: 140rpx;
} }
.right { .right {
flex: 1; flex: 1;

BIN
src/static/image/finish.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.5 KiB

BIN
src/static/image/home_bg.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 201 KiB

BIN
src/static/image/mouth.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

BIN
src/static/image/need.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

Write Preview
Loading…
Cancel
Save