/** * @Description: * @author cxg * @date 2022/06/06 */ <template> <div class="theme-com"> <div v-for="(item,index) in themeList" :key="index" :class="{'active': activeTheme === item.value}" class="theme-box-item" @click="setThemeEvent(item)"> <div class="theme-img-box"> <img :src="'/images/theme/' + item.value + '.png'" alt=""> </div> <div class="theme-title-box"> {{ item.name }} </div> </div> </div> </template> <script> export default { components: {}, data() { return { activeTheme: '', themeList: [ { name: '星空蓝', value: 'blue' }, { name: '丁香紫', value: 'Purple' }, { name: '玫瑰金', value: 'roseGold' }, { name: '草原绿', value: 'green' }, { name: '土豪金', value: 'localTyrantGold' }, { name: '喜庆红', value: 'festiveRed' }, { name: '水墨黑', value: 'inkBlack' }, { name: '迷雾森林', value: 'mistyForest' }, { name: '梦幻紫', value: 'dreamPurple' } ] } }, computed: {}, mounted() {}, methods: { setThemeEvent(item) { this.activeTheme = item.value document.getElementsByTagName('body')[0].className = `dee-theme-${this.activeTheme}` this.$store.dispatch('theme/setTheme', this.activeTheme) this.$emit('setThemeEvent', item.value) } } } </script> <style lang='scss'> .theme-com{ padding: 6px; display: flex; flex-wrap: wrap; .theme-box-item{ padding: 11px; width: 100px; .theme-img-box{ cursor: pointer; width: 100%; padding: 8px; } .theme-title-box{ text-align: center } &:hover{ background: #F4F4F4 } &.active{ background: #F4F4F4; border:solid 1px #BCBCBC } } } </style>