From e7eed56f874f12bbd870115ac88f447f6d102f71 Mon Sep 17 00:00:00 2001 From: 刘嘉威 <daidaibg@163.com> Date: 星期一, 08 五月 2023 17:36:53 +0800 Subject: [PATCH] perf: 更新依赖 --- 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..ca02c87 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="isScaleChange"> + <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="indexRadioChange" + > + <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="indexRadioChange" + > + <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