From a59da005567ed5eed92f1fa8ed27391192b4063d Mon Sep 17 00:00:00 2001 From: xiangpei <xiangpei@timesnew.cn> Date: 星期三, 20 三月 2024 10:35:21 +0800 Subject: [PATCH] Merge remote-tracking branch 'origin/master' --- src/views/screen/components/select-item/index.vue | 83 ++++++++++++++++++++++++++++++++++++++++- 1 files changed, 80 insertions(+), 3 deletions(-) diff --git a/src/views/screen/components/select-item/index.vue b/src/views/screen/components/select-item/index.vue index f458ad6..4bd541b 100644 --- a/src/views/screen/components/select-item/index.vue +++ b/src/views/screen/components/select-item/index.vue @@ -1,15 +1,92 @@ <template> <div class="select-container"> - + <div class="type-select"> + <div class="select-label">鏁版嵁婧�</div> + <el-select v-model="typeValue" popper-class="type-select" class="select-style" @change="setConfig"> + <el-option v-for="item in testData1" :key="item.name" :label="item.name" :value="item.value" /> + </el-select> + </div> + + <div class="date-select"> + <div class="select-label">鏃ユ湡</div> + <el-date-picker v-model="dateValue" type="daterange" range-separator="鑷�" start-placeholder="寮�濮嬫棩鏈�" + end-placeholder="缁撴潫鏃ユ湡" value-format="yyyy-MM-dd" @change="setConfig" /> + </div> + </div> </template> <script> - export default { - +export default { + data() { + return { + typeValue: 1, + dateValue: new Date(), + testData1: [ + { + name: '鐪佸巺', + value: 1 + }, + { + name: '甯傚巺', + value: 2 + }, + { + name: '鍏畨閮�', + value: 3 + } + ] + } + }, + methods: { + setConfig() { + + } } +} </script> <style lang="scss" scoped> +.select-container { + position: absolute; + top: 40px; + left: 20px; + display: flex; + align-items: center; + + .select-label { + font-size: 20px; + margin-right: 10px; + color: #2375f0; + flex-shrink: 0; + } + + .type-select { + display: flex; + align-items: center; + margin-right: 20px; + width: 240px; + } + + .date-select { + display: flex; + align-items: center; + width: 320px; + } +} +::v-deep .el-input__inner { + background: rgba(67, 102, 155, 0.4) !important; + color: #4481DD; + border-color: #4481DD !important; +} + +::v-deep .date-select .el-range-input { + background-color: transparent !important; + color: #4481DD; +} +::v-deep .date-select .el-date-editor .el-range-separator { + color: #4481DD !important; +} + </style> \ No newline at end of file -- Gitblit v1.8.0