<template>
|
<flex-layout class="pifu-list-wrapper" no-bg>
|
<div class="pifu-list-header" slot="header">主题设置</div>
|
<div class="pifu-list-content">
|
<div class="pifu-list-container">
|
<el-row>
|
<el-col :span="12" v-for="(item, index) in skinList" :key="index">
|
<div class="pifu-item">
|
<div
|
class="pifu-item-img"
|
:class="{
|
'full-screen': fullScreen,
|
active: index == selectActive
|
}"
|
@click.stop="changeSkin(item, index)"
|
>
|
<el-image :src="item.img">
|
<div slot="placeholder" class="image-slot">
|
<i class="el-icon-picture-outline"></i>
|
</div>
|
</el-image>
|
</div>
|
<div class="pifu-item-txt">{{ item.name }}</div>
|
</div>
|
</el-col>
|
</el-row>
|
</div>
|
</div>
|
</flex-layout>
|
</template>
|
|
<script>
|
export default {
|
name: "PifuList",
|
data() {
|
return {
|
fullScreen: false,
|
selectActive: 0,
|
skinList: [
|
{
|
img: require("@/assets/images/theme/science.png"),
|
name: "科技蓝",
|
skin: "science-blue"
|
},
|
{
|
img: require("@/assets/images/theme/science2.png"),
|
name: "荧光绿",
|
skin: "science-green"
|
},
|
{
|
img: require("@/assets/images/theme/science3.png"),
|
name: "优雅黑",
|
skin: "science-black"
|
},
|
{
|
img: require("@/assets/images/theme/science4.png"),
|
name: "木槿紫",
|
skin: "science-purple"
|
},
|
{
|
img: require("@/assets/images/theme/science5.png"),
|
name: "紫罗兰",
|
skin: "science-ziluolan"
|
},
|
{
|
img: require("@/assets/images/theme/science6.png"),
|
name: "靛青色",
|
skin: "science-skyBlue"
|
}
|
]
|
};
|
},
|
mounted() {
|
this.skinList.forEach((item, index) => {
|
if (item.skin == this.$store.state.theme.activeSkin) {
|
this.selectActive = index;
|
}
|
});
|
},
|
methods: {
|
prePifu() {
|
this.fullScreen = this.fullScreen ? false : true;
|
},
|
changeSkin(item, index) {
|
let skin = item.skin;
|
let name = item.name;
|
this.$store.commit("theme/changeTheme", skin);
|
this.$store.dispatch("theme/changeThemeName", name);
|
sessionStorage.setItem("activeSkin", skin);
|
this.selectActive = index;
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.pifu-list {
|
display: flex;
|
height: 100%;
|
}
|
|
.pifu-list-header {
|
margin-top: 4px;
|
margin-left: 4px;
|
margin-right: 4px;
|
padding-left: 10px;
|
border-radius: 4px;
|
font-size: 20px;
|
text-align: center;
|
line-height: 36px;
|
font-weight: bold;
|
}
|
|
.pifu-item {
|
padding: 8px;
|
}
|
|
.pifu-list-container {
|
margin-top: 4px;
|
margin-left: 4px;
|
margin-right: 4px;
|
}
|
|
.pifu-item-img.full-screen {
|
position: fixed;
|
top: 0;
|
right: 0;
|
bottom: 0;
|
left: 0;
|
}
|
|
.pifu-item-img {
|
width: 100%;
|
height: 100px;
|
}
|
|
.pifu-item-img img {
|
width: 100%;
|
height: 100%;
|
}
|
|
.pifu-item-txt {
|
user-select: none;
|
text-align: center;
|
}
|
|
.pre-pifu {
|
margin-left: 8px;
|
font-size: 14px;
|
color: #4279dc;
|
cursor: pointer;
|
}
|
|
.pre-pifu:hover {
|
color: #6e9bea;
|
}
|
|
.pre-pifu:active {
|
color: #ff0000;
|
}
|
</style>
|
