<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2022-08-18 16:18:17
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2022-09-19 17:42:50
|
* @FilePath: \srs-police-affairs\src\views\activity\index.vue
|
* @Description: 安保活动
|
*
|
* Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved.
|
-->
|
|
<template>
|
<div class="container">
|
<div class="title">活动信息</div>
|
<div class="search-box">
|
<div>
|
<div class="category">活动类型：</div>
|
<div class="category-value">
|
<el-select size="small" v-model="activityType" placeholder="请选择">
|
<el-option
|
v-for="item in activityOptions"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</div>
|
</div>
|
<div>
|
<div class="category">活动名称：</div>
|
<div class="category-value">
|
<el-input size="small" placeholder="请输入活动名称" v-model="searchActivity">
|
<el-button slot="append" icon="el-icon-search"></el-button>
|
</el-input>
|
</div>
|
</div>
|
<div>
|
<div class="category">选择时间：</div>
|
<div class="category-value">
|
<el-date-picker
|
size="small"
|
v-model="selectTime"
|
type="date"
|
placeholder="选择日期"
|
></el-date-picker>
|
</div>
|
</div>
|
</div>
|
<div class="result-content">
|
<div class="table-box">
|
<div class="row-box" v-for="(item, index) in 6" :key="index">
|
<div class="row-title">常规安保</div>
|
<div class="row-content">
|
<div>
|
<div class="category">活动名称：</div>
|
<div class="category-value">xxx活动</div>
|
</div>
|
<div>
|
<div class="category">活动时间：</div>
|
<div class="category-value">2022-08-01 00:00:00 至 2022-09-01 00:00:00</div>
|
</div>
|
<div>
|
<div class="category">活动详情：</div>
|
<div class="category-value">护送某某某到某某某个地方</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<el-pagination
|
@size-change="sizeChange"
|
@current-change="currentChange"
|
:current-page="currentPage"
|
:page-sizes="[100, 200, 300, 400]"
|
:page-size="100"
|
layout="total, sizes, prev, pager, next, jumper"
|
:total="400"
|
></el-pagination>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
|
export default {
|
data () {
|
return {
|
activityOptions: [{
|
value: '选项1',
|
label: '黄金糕'
|
}, {
|
value: '选项2',
|
label: '双皮奶'
|
}, {
|
value: '选项3',
|
label: '蚵仔煎'
|
}, {
|
value: '选项4',
|
label: '龙须面'
|
}, {
|
value: '选项5',
|
label: '北京烤鸭'
|
}],
|
activityType: '',
|
searchActivity: '',
|
selectTime: '',
|
navType: 0,
|
currentPage: 4
|
}
|
},
|
created () {
|
|
},
|
mounted () {
|
|
},
|
updated () {
|
|
},
|
methods: {
|
sizeChange (val) {
|
console.log(`每页 ${val} 条`)
|
},
|
currentChange (val) {
|
console.log(`当前页: ${val}`)
|
}
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.container {
|
position: relative;
|
display: flex;
|
flex-direction: column;
|
width: 400px;
|
height: 100%;
|
color: #fff;
|
background: rgba(7, 22, 37, 0.8);
|
|
.search-box {
|
padding: 0 10px;
|
|
& > div {
|
margin-top: 10px;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
.category {
|
width: 88px;
|
}
|
|
.category-value {
|
flex: 1;
|
}
|
}
|
}
|
|
.result-content {
|
flex: 1;
|
margin-top: 8px;
|
display: flex;
|
flex-direction: column;
|
overflow: hidden;
|
|
.table-box {
|
flex: 1;
|
overflow-x: hidden;
|
overflow-y: auto;
|
|
.row-box {
|
margin: 10px;
|
padding: 10px;
|
background: rgba(15, 31, 50, 0.5);
|
|
.row-content {
|
& > div {
|
display: flex;
|
line-height: 28px;
|
|
.category {
|
width: 88px;
|
}
|
|
.category-value {
|
flex: 1;
|
display: flex;
|
justify-content: flex-start;
|
flex-wrap: wrap;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
