From cb8b1337e0a35534abc6ce653f0acce9b1515e16 Mon Sep 17 00:00:00 2001
From: 龚焕茏 <2842157468@qq.com>
Date: 星期一, 08 四月 2024 18:01:40 +0800
Subject: [PATCH] 运维单位
---
src/views/screen/components/select-item/index.vue | 135 ++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 132 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..53a40cd 100644
--- a/src/views/screen/components/select-item/index.vue
+++ b/src/views/screen/components/select-item/index.vue
@@ -1,15 +1,144 @@
<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="local-select">
+ <div class="select-label">鍦板尯</div>
+ <el-select v-model="localValue" popper-class="type-select" class="select-style" @change="setConfig">
+ <el-option v-for="item in testData2" :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,
+ localValue: 1,
+ dateValue: new Date(),
+ testData1: [
+ {
+ name: '鐪佸巺鏁版嵁',
+ value: 1
+ },
+ {
+ name: '甯傚眬鏁版嵁',
+ value: 2
+ },
+ {
+ name: '鍏畨閮ㄦ暟鎹�',
+ value: 3
+ }
+ ],
+ testData2: [
+ {
+ name: '瀵岄『鍘�',
+ value: 1,
+ },
+ {
+ name: '鑽ｅ幙',
+ value: 2,
+ },
+ {
+ name: '楂樻柊鍖�',
+ value: 3,
+ },
+ {
+ name: '鑷祦浜曞尯',
+ value: 4,
+ },
+ {
+ name: '璐′簳鍖�',
+ value: 5,
+ },
+ {
+ name: '澶у畨鍖�',
+ value: 6,
+ },
+ {
+ name: '娌挎哗鍖�',
+ value: 7,
+ },
+ ]
+ }
+ },
+ 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;
+ }
+
+ .local-label {
+ font-size: 20px;
+ margin-right: 10px;
+ color: #2375f0;
+ flex-shrink: 0;
+ }
+
+ .type-select {
+ display: flex;
+ align-items: center;
+ margin-right: 20px;
+ width: 200px;
+ }
+
+ .local-select {
+ display: flex;
+ align-items: center;
+ margin-right: 20px;
+ width: 200px;
+ }
+
+ .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