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. 684
      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 */
}

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

@ -1,340 +1,372 @@
<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> <view class="number">42</view>
<view class="data"> </view>
<view class="left"> <image style="width: 160rpx" mode="widthFix" src="../../static/image/need.png" class="need"></image>
<image src="/static/home/pend.png" mode="" class="pend"></image> <view class="bottom PositionA Flex Flex_C_S-A TextCenter blur">
</view> <view class="item Flex_C_S-Center">
<view class="right"> <text>超期</text>
<view class="imgBox"> <text style="margin-left: 10rpx">17</text>
<image src="/static/home/month.png" mode="" class="img" ></image> </view>
</view> <view class="item Flex_C_S-Center">
<view class="imgBox"> <text>临期</text>
<image src="/static/home/finish.png" mode="" class="img"></image> <text style="margin-left: 10rpx">25</text>
</view> </view>
</view> </view>
</view>
</view> <view class="right">
<view class="current_mouth Flex Flex_C_S-B blur">
<view class="knowContent" @click="goToKnowledge"> <image style="width: 80rpx" mode="widthFix" src="../../static/image/mouth.png" class="video"></image>
<image src="/static/know.png" mode="" class="know"></image> <text class="name">本月上报</text>
</view> <text class="number">18</text>
<view class="pendding"> </view>
待办任务 <view class="finish Flex Flex_C_S-B blur">
</view> <image style="width: 80rpx" mode="widthFix" src="../..//static/image/finish.png" class="video"></image>
<view class="ListBox"> <text class="name">已完成</text>
<view class="ListItem" v-for="(item,index) in data" @click="handleDetail(item)"> <text class="number">12800</text>
<view class="isTime" :style="{ backgroundColor: item.isTime == 0 ? '#cc2936' : '#e68a0b' }">{{item.isTime==0?'超期':'临期'}} </view> </view>
<image :src="item.imgurl" mode="" class="car"></image> </view>
<view class="textBox"> </view>
<view class="toptext"> </view>
{{item.title}} <view class="con">
</view> <text>交通隐患排查知识库</text>
<view class="bottomText"> </view>
<text class="paicha">{{item.paicha}} </text> <view class="Width100 Box BorderBox">
<text>{{item.createTime}}</text> <view class="list_title">待办任务</view>
</view> <view class="Content MarginAuto BorderBox">
</view> <no-data v-if="isEmpty" />
</view> <view v-else class="List Width100 BorderBox">
</view> <view class="Unit FontBold BorderBox Width100 MarginT_30rpx BG_FFFFFF"
</view> 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="trapezoidal">
超期
</view>
</view>
</view>
</view>
</view>
</view>
</template> </template>
<script> <script>
export default { import NoData from "../../components/no-data/index.vue";
data() { export default {
return { // 组件
title: '下拉刷新 + 加载更多', components: {
data: [{ //window.PCRWList || NoData
id: 12121212, },
title: 'G228火炬路与S503岙东路', data() {
roadCode: 123, return {
roadName: 'G228火炬路与S503岙东路', // 公用的js
imgurl: '/static/car.png', bgUrl1: '', // 登录信息背景图
createTime: '超期2天', //2024-10-05 list: [
deptName: '支队级', {
sessionId: 12121212, id: 1,
paicha:"排查", title: 'G228火炬路与S503岙东路路',
isTime:0 roadCode: 123,
}, roadName: 'G228火炬路与S503岙东路',
{ //window.PCRWList || imgurl: '/static/imge.png',
id: 37020017407, createTime: '2024-10-05',
title: '金水路与合川路事故多发点段', deptName: '支队级',
roadCode: 123, sessionId: 12121212
roadName: '金水路与合川路', },
imgurl: '/static/car.png', {
createTime: '剩余2天', id: 2,
deptName: '支队级', title: 'G228火炬路与S503岙东路路',
sessionId: 37020017407, roadCode: 123,
paicha:"排查", roadName: 'G228火炬路与S503岙东路',
isTime:1 imgurl: '/static/imge.png',
}, createTime: '2024-10-05',
{ deptName: '支队级',
id: 37020017404, sessionId: 12121212
title: '金水路与合川路事故多发点段', },
roadCode: 123, {
roadName: '金水路与合川路', id: 3,
imgurl: '/static/car.png', title: 'G228火炬路与S503岙东路路',
createTime: '超期2天', roadCode: 123,
deptName: '支队级', roadName: 'G228火炬路与S503岙东路',
sessionId: 37020017404, imgurl: '/static/imge.png',
paicha:"排查", createTime: '2024-10-05',
isTime:1 deptName: '支队级',
}, sessionId: 12121212
], },
loadMoreText: "加载中...", {
showLoadMore: false, id: 4,
max: 0, title: 'G228火炬路与S503岙东路路',
swiperList: [{ roadCode: 123,
imgurl: '/static/banner/1.jpg' roadName: 'G228火炬路与S503岙东路',
}, imgurl: '/static/imge.png',
{ createTime: '2024-10-05',
imgurl: '/static/banner/2.jpg' deptName: '支队级',
}, sessionId: 12121212
{ },
imgurl: '/static/banner/3.jpg' {
}, id: 5,
{ title: 'G228火炬路与S503岙东路路',
imgurl: '/static/banner/4.jpg' roadCode: 123,
} roadName: 'G228火炬路与S503岙东路',
] imgurl: '/static/imge.png',
} createTime: '2024-10-05',
}, deptName: '支队级',
onLoad() { sessionId: 12121212
this.initData(); },
}, ],
isEmpty: false,
isMore: true,
page: 1,
tab: 1
}
},
// 页面加载
onLoad(e) {
this.getList()
},
// 计算属性
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
// }
// } else {
// this.$.toast(res.msg)
// }
// })
},
handleClick(row) {
console.log(row)
},
// 跳转页面
skipPage(even) {
// this.$.open(even)
},
},
onReady() {},
// 页面卸载
onUnload() {
onUnload() { },
// this.max = 0, // 触发下拉刷新
// this.data = [], onPullDownRefresh() {
// this.loadMoreText = "加载更多", // 延迟关闭刷新动画
// this.showLoadMore = false; setTimeout(() => {
}, uni.stopPullDownRefresh();
onReachBottom() { }, 1500);
// console.log("onReachBottom"); },
// if (this.max > 40) { // 页面上拉触底事件的处理函数
// this.loadMoreText = "没有更多数据了!" onReachBottom() {
// return; if (this.isMore) {
// } this.page++
// this.showLoadMore = true; this.getList()
// setTimeout(() => { }
// this.setListData(); },
// }, 300); }
},
onPullDownRefresh() {
console.log('onPullDownRefresh');
this.initData();
},
methods: {
goToKnowledge() {
uni.navigateTo({
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() {
// 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);
},
// 跳转到详情页
handleDetail(item) {
this.$store.commit('setItemMessage', item)
uni.navigateTo({
// url: `/pages/home/detail?params=${encodeURIComponent(JSON.stringify(item))}`
url: '/pages/home/detail'
})
}
}
}
</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{
width:100%;
height:220rpx;
border-radius:20rpx;
overflow: hidden;
}
}
.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
}
.textBox{
padding-left:30rpx;
.toptext{
font-size:35rpx;
font-weight:600;
margin-bottom:20rpx
}
.bottomText{
.paicha{
margin-right:30rpx
}
}
}
}
}
.imgleft {
width: 80rpx;
margin-right: 20rpx;
max-height: 100%;
}
.swiper-container {
width: 100%;
// height: 300rpx; //
// margin-top: 20rpx; //
// background-color: #2663bf
}
.swiper-image {
width: 100%;
height: 300rpx;
// object-fit: cover;
}
.uni-padding-wrap { .header {
height: 60vh; background: url("../../static/image/home_bg.png") no-repeat;
.uni-list-item{ background-size: cover;
margin:20px 0; height: 500rpx;
height:190rpx 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;
}
}
.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;
}
}
.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%;
}
}
.content { }
flex: 1; }
display: flex;
flex-direction: column;
.title { .img {
font-size: 32rpx; width: 40rpx;
width: 100%; height: 40rpx;
text-overflow: ellipsis; margin-left: 30rpx;
overflow: hidden; }
white-space: nowrap; .trapezoidal {
} position: relative;
display: inline-block;
min-width: 2em;
text-align: center;
padding: 3rpx 20rpx 3rpx 18rpx;
}
.bottom { .trapezoidal::before,
display: flex; .trapezoidal::after {
content: '';
position: absolute;
top: 0;
left: 0%;
width: 100%;
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;
}
.text { .trapezoidal::after {
margin-right: 20rpx; 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;
}
.right { .Box {
height: 100%; .Content {
display: flex; width: calc(100% - 48rpx);
align-items: center; padding-bottom: 100rpx;
margin-left: 10px; }
.btn { .Unit {
width: 120rpx; padding: 24rpx;
height: 70rpx; display: flex;
line-height: 70rpx; justify-content: space-between;
font-size: 28rpx; align-items: center;
} position: relative;
} box-shadow: 1px 1px 3px #ccc;
} .trapezoidal {
</style> 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: 16px;
}
.type {
font-size: 14px;
color: #666;
font-weight: normal;
text {
margin-right: 20rpx;
}
}
}
}
}
</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