From 25faf475cea0b5a50393989aa4e8b7e0b1da8d77 Mon Sep 17 00:00:00 2001
From: odc.xiaohui <xiaohui@Q1>
Date: 星期三, 28 二月 2024 17:20:27 +0800
Subject: [PATCH] 大屏左侧
---
src/views/setting.vue | 137 +++++++++++++++++++++++++++++++++++++++++++--
1 files changed, 131 insertions(+), 6 deletions(-)
diff --git a/src/views/setting.vue b/src/views/setting.vue
index 7df5872..d637f3b 100644
--- a/src/views/setting.vue
+++ b/src/views/setting.vue
@@ -1,13 +1,138 @@
-<script setup lang='ts'>
+<script setup lang="ts">
+import { useSettingStore } from "@/stores/index";
+import { ref } from "vue";
+import {storeToRefs} from "pinia"
+const isScaleRadio = ref(false);
+const leftBottomRadio=ref(true)
+const rightBottomRadio=ref(true)
+const settingStore = useSettingStore();
+const {indexConfig}=storeToRefs(settingStore)
+const init = () => {
+ settingStore.initSetting();
+ isScaleRadio.value = settingStore.isScale;
+
+ leftBottomRadio.value=indexConfig.value.leftBottomSwiper
+ rightBottomRadio.value=indexConfig.value.rightBottomSwiper
+
+};
+init();
+const handleClose = () => {};
+
+const cancelClick = () => {
+ settingStore.setSettingShow(false);
+};
+
+const confirmClick = () => {};
+const isScaleChange = (flag: boolean) => {
+ settingStore.setIsScale(flag);
+};
+const radiochange = (blag: boolean) => {
+ settingStore.setIsScale(blag);
+ // this.$store.commit('setting/updateSwiper', { val, type })
+};
+const indexRadioChange=(flag: boolean)=>{
+ settingStore.setIndexConfig({
+ leftBottomSwiper: leftBottomRadio.value,//宸﹁疆鎾�
+ rightBottomSwiper:rightBottomRadio.value,//鍙充笅杞挱
+ });
+}
</script>
<template>
- <div class=''>
-
- </div>
+ <el-drawer v-model="settingStore.settingShow" direction="rtl" size="360px">
+ <template #header>
+ <h2 class="setting-title">璁剧疆</h2>
+ </template>
+ <template #default>
+ <div class="left_shu">鍏ㄥ眬璁剧疆</div>
+ <div class="setting_item">
+ <span class="setting_label">
+ 鏄惁杩涜鑷姩閫傞厤<span class="setting_label_tip"
+ >(榛樿鍒嗚鲸鐜�1920*1080)</span
+ >:
+ </span>
+ <div class="setting_content">
+ <el-radio-group v-model="isScaleRadio" @change="(flag)=>isScaleChange(flag as boolean)">
+ <el-radio :label="true">鏄�</el-radio>
+ <el-radio :label="false">鍚�</el-radio>
+ </el-radio-group>
+ </div>
+ </div>
+ <div class="left_shu">瀹炴椂鐩戞祴</div>
+ <div class="setting_item">
+ <span class="setting_label">
+ 璁惧鎻愰啋鑷姩杞: <span class="setting_label_tip"></span>
+ </span>
+ <div class="setting_content">
+ <el-radio-group
+ v-model="leftBottomRadio"
+ @change="(flag)=>indexRadioChange(flag as boolean)"
+ >
+ <el-radio :label="true">鏄�</el-radio>
+ <el-radio :label="false">鍚�</el-radio>
+ </el-radio-group>
+ </div>
+ </div>
+ <div class="setting_item">
+ <span class="setting_label"> 瀹炴椂棰勮杞挱: </span>
+ <div class="setting_content">
+ <el-radio-group
+ v-model="rightBottomRadio"
+ @change="(flag)=>indexRadioChange(flag as boolean)"
+ >
+ <el-radio :label="true">鏄�</el-radio>
+ <el-radio :label="false">鍚�</el-radio>
+ </el-radio-group>
+ </div>
+ </div>
+ </template>
+ <!-- <template #footer>
+ <div style="flex: auto">
+ <el-button @click="cancelClick">鍙栨秷</el-button>
+ <el-button type="primary" @click="confirmClick">纭畾</el-button>
+ </div>
+ </template> -->
+ </el-drawer>
</template>
-<style scoped lang='scss'>
+<style scoped lang="scss">
+.setting-title {
+ font-size: 20px;
+ color: #000;
+ font-weight: 900;
+ text-align: center;
+ line-height: 1;
+}
+.left_shu {
+ color: #000;
+ font-weight: 900;
+ position: relative;
+ text-indent: 10px;
+ padding: 16px 0 10px 0;
+ line-height: 1;
+ &::before {
+ display: block;
+ content: " ";
+ height: 16px;
+ width: 4px;
+ border-radius: 2px;
+ background: #0072ff;
+ position: absolute;
+ left: 0px;
+ }
+}
+.setting_item {
+ font-size: 14px;
+ line-height: 1.5;
-</style>
\ No newline at end of file
+ // display: flex;
+ .setting_label {
+ color: #555454;
+ }
+ .setting_label_tip {
+ font-size: 12px;
+ color: #838282;
+ }
+}
+</style>
--
Gitblit v1.8.0