触发记录

This commit is contained in:
liuye
2023-03-14 10:37:35 +08:00
parent 5afabf47b0
commit a2df4062b0

View File

@@ -0,0 +1,182 @@
<template>
<div class="triggerRecord">
<AiTopFixed>
<div class="top-select">
<div class="item">
<AiAreaPicker v-model="areaId" :areaId="areaId" @select="areaSelect" :name.sync="areaName" style="color: #666" selectRoot>
<span style="margin-left: 4px" v-if="areaName">{{ areaName }}</span>
<span v-else style="color:#999;">行政区划</span>
<u-icon name="arrow-down" color="#666" size="28" style="margin-left: 4px" />
</AiAreaPicker>
</div>
<div class="item">
<span style="color:#999;">部门名称</span>
<!-- <span v-else>{{ $dict.getLabel('EP_handleType', handleType) }}</span> -->
<u-icon name="arrow-down" color="#666" size="28" style="margin-left: 4px" />
</div>
</div>
<div class="top-search">
<div class="left">
<u-search v-model="keyword" :clearabled="true" placeholder="请输入昵称" :show-action="false" bg-color="#F5F5F5"
search-icon-color="#999" color="#999" height="58" @search="getListInit" @clear="getListInit">
</u-search>
</div>
</div>
</AiTopFixed>
<div class="user-list">
<div class="item">
<img src="./img/user-img.png" alt="">
<div class="item-right">
<div class="user">
<p>李毅</p>
<div>你是<span>哪位</span></div>
</div>
<div class="time">2023-02-23 17:55</div>
</div>
</div>
<div class="item">
<img src="./img/user-img.png" alt="">
<div class="item-right">
<div class="user">
<p>李毅</p>
<div>你是<span>哪位</span></div>
</div>
<div class="time">2023-02-23 17:55</div>
</div>
</div>
<div class="item">
<img src="./img/user-img.png" alt="">
<div class="item-right">
<div class="user">
<p>李毅</p>
<div>你是<span>哪位</span></div>
</div>
<div class="time">2023-02-23 17:55</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "triggerRecord",
data() {
return {
keyword: '',
areaId: '',
areaName: '',
};
},
onShow() {
document.title = '触发记录'
},
methods: {
getListInit() {
},
areaSelect(e) {
this.areaId = e
this.getListInit()
this.getTotal()
},
},
};
</script>
<style lang="scss" scoped>
.triggerRecord {
height: 100%;
::v-deep .AiTopFixed {
.placeholder {
.content {
padding: 0 !important;
}
}
.fixed {
margin: 0 !important;
.content {
padding: 0 !important;
}
}
}
.top-search {
padding: 20px 32px;
display: flex;
.left {
width: 100%;
}
}
.top-select {
display: flex;
padding: 28px 0;
border-bottom: 1px solid #eee;
.item {
flex: 1;
padding: 0 8px;
text-align: center;
span {
display: inline-block;
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 28px;
color: #666;
line-height: 40px;
}
}
}
.user-list {
background-color: #fff;
.item {
padding: 24px 0 0 32px;
display: flex;
img {
width: 80px;
height: 80px;
margin-right: 32px;
}
.item-right {
width: calc(100% - 112px);
display: flex;
justify-content: space-between;
border-bottom: 1px solid #eee;
padding-right: 32px;
box-sizing: border-box;
.user {
width: calc(100% - 240px);
p {
line-height: 44px;
font-family: PingFangSC-Medium;
font-weight: 500;
font-size: 32px;
color: #333;
letter-spacing: 0.3px;
margin-bottom: 8px;
}
div {
color: #666;
font-size: 28px;
font-family: PingFangSC;
line-height: 40px;
padding-bottom: 20px;
span {
color: #e6736e;
}
}
}
.time {
font-family: PingFangSC-Regular;
font-size: 26px;
color: #999;
}
}
}
.item:nth-last-child(1) {
p {
border-bottom: 0;
}
}
}
}
</style>