翻译

lxf

2025-07-16 fcb00a66b4053550b473a29d7299c7a4737eea75

 src/page/themeModel/index.vue

@@ -1,78 +1,86 @@
<template>
    <div class="lang">
        <assets-head :title="$t('主题设置')" />
        <div v-for="(item, index) in themeList" :key="index"
            class="flex justify-between items-center lang-padding font-35 box-border h-127 px-35 "
            @click="changeModel(item.type)">
            <div class="lang-title flex items-center font-26 textColor">
                {{ $t(item.title) }}
            </div>
  <div class="lang">
    <assets-head :title="$t('主题设置')" />
    <div
      v-for="(item, index) in themeList"
      :key="index"
      class="flex justify-between items-center lang-padding font-35 box-border h-127 px-35"
      @click="changeModel(item.type)"
    >
      <div class="lang-title flex items-center font-26 textColor">
        {{ $t(item.title) }}
      </div>

            <img class="w-40 h-40 lh-40" v-if="item.type == theme" src="../../assets/image/public/checked.png" />
        </div>
      <img
        class="w-40 h-40 lh-40"
        v-if="item.type == theme"
        src="../../assets/image/public/checked.png"
      />
    </div>
  </div>
</template>
<script>
import { mapGetters, mapMutations } from "vuex";
import assetsHead from "@/components/assets-head";
import { setStorage, getStorage } from '@/utils/utis'
import { setStorage, getStorage } from "@/utils/utis";
export default {
    data() {
        return {
            type: 'white',
            themeList: [
                {
                    title: '白天模式',
                    type: 'light',
                },
                {
                    title: '黑夜模式',
                    type: 'dark',
                },
            ]
        }
  data() {
    return {
      type: "dark",
      // type: 'white',
      themeList: [
        // {
        //     title: '白天模式',
        //     type: 'light',
        // },
        {
          title: "黑夜模式",
          type: "dark",
        },
      ],
    };
  },
  components: {
    assetsHead,
  },
  computed: {
    ...mapGetters("home", ["theme"]),
  },
  methods: {
    ...mapMutations("home", ["SET_THEME"]),
    changeModel(type) {
      this.type = type;
      this.SET_THEME(type);
    },
    components: {
        assetsHead,
    },
    computed: {
        ...mapGetters('home', ['theme'])
    },
    methods: {
        ...mapMutations('home', ['SET_THEME']),
        changeModel(type) {
            this.type = type;
            this.SET_THEME(type)
        }
    }
}
  },
};
</script>
<style lang="scss" scoped>
.lang {
    width: 100%;
    box-sizing: border-box;
  width: 100%;
  box-sizing: border-box;
}

.CommonProblem-padding {
    padding-left: 50px;
    padding-right: 50px;
  padding-left: 50px;
  padding-right: 50px;
}

.lang-padding {
    padding: 43px 35px 43px 35px;
    box-sizing: border-box;
  padding: 43px 35px 43px 35px;
  box-sizing: border-box;

    @include themify() {
        border-bottom: 1px solid themed("line_color");
    }
  @include themify() {
    border-bottom: 1px solid themed("line_color");
  }

    font-weight: 400;
    font-size: 35px;
    color: #000000;
    display: flex;
  font-weight: 400;
  font-size: 35px;
  color: #000000;
  display: flex;
}

.lang-flex {
    flex: 1;
  flex: 1;
}
</style>