384 lines
11 KiB
Vue
384 lines
11 KiB
Vue
<template>
|
||
<div class="theme-right">
|
||
<div class="title">主题设置</div>
|
||
<div class="setting">
|
||
<ul class="stem">
|
||
<div class="stem-title">主题颜色</div>
|
||
<li>
|
||
<div>题干颜色</div>
|
||
<ColorPicker
|
||
:defaultColor="themeInfo.stem_color"
|
||
@choiceColor="(e) => handlerColorPicker(e, 'stem_color')"
|
||
/>
|
||
</li>
|
||
<li>
|
||
<div>答案颜色</div>
|
||
<ColorPicker
|
||
:defaultColor="themeInfo.answer_color"
|
||
@choiceColor="(e) => handlerColorPicker(e, 'answer_color')"
|
||
/>
|
||
</li>
|
||
<li>
|
||
<div>按钮颜色</div>
|
||
<ColorPicker
|
||
:defaultColor="themeInfo.button_color"
|
||
@choiceColor="(e) => handlerColorPicker(e, 'button_color')"
|
||
/>
|
||
</li>
|
||
<li>
|
||
<div>按钮文字颜色</div>
|
||
<ColorPicker
|
||
:defaultColor="themeInfo.button_text_color"
|
||
@choiceColor="(e) => handlerColorPicker(e, 'button_text_color')"
|
||
/>
|
||
</li>
|
||
</ul>
|
||
<div class="line"></div>
|
||
<ul class="stem">
|
||
<div class="stem-title">头图</div>
|
||
<li>
|
||
<div>显示头图</div>
|
||
<a-switch
|
||
v-model:checked="themeInfo.head_img_status"
|
||
@change="handlerStatus('head_img_status')"
|
||
></a-switch>
|
||
</li>
|
||
<li>
|
||
<div>
|
||
上传头图
|
||
<PopConfirm
|
||
:text="`建议尺寸：1210*265px，安全区域404*265px<br>格式要求：JPEG、PNG、JPG和GIF<br>图片大小：2M以下`"
|
||
/>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<ImageCard
|
||
v-if="themeInfo.head_img_url"
|
||
:url="themeInfo.head_img_url"
|
||
:type="0"
|
||
:autoCropHeight="300"
|
||
:autoCropWidth="750"
|
||
:multiple="false"
|
||
@remove="removeImg('head_img_url')"
|
||
@changes="(url) => changeUpload(url, 'head_img_url')"
|
||
/>
|
||
<ImageCard
|
||
v-else
|
||
:type="1"
|
||
:isDes="false"
|
||
:autoCropHeight="300"
|
||
:autoCropWidth="750"
|
||
:multiple="false"
|
||
@changes="(url) => changeUpload(url, 'head_img_url')"
|
||
/>
|
||
</li>
|
||
</ul>
|
||
<div class="line"></div>
|
||
<ul class="stem">
|
||
<div class="stem-title">LOGO</div>
|
||
<li>
|
||
<div>显示LOGO</div>
|
||
<a-switch
|
||
v-model:checked="themeInfo.logo_status"
|
||
@change="handlerStatus('logo_status')"
|
||
></a-switch>
|
||
</li>
|
||
<li>
|
||
<div>
|
||
上传LOGO
|
||
<PopConfirm
|
||
text="建议尺寸：宽度100px，高度100px格式要求：JPEG、PNG、JPG和GIF图片大小：2M以下"
|
||
/>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<ImageCard
|
||
v-if="themeInfo.logo_url"
|
||
:url="themeInfo.logo_url"
|
||
:autoCropHeight="100"
|
||
:autoCropWidth="100"
|
||
:type="0"
|
||
:multiple="false"
|
||
@remove="removeImg('logo_url')"
|
||
@changes="(url) => changeUpload(url, 'logo_url')"
|
||
/>
|
||
<ImageCard
|
||
v-else
|
||
:type="1"
|
||
:autoCropHeight="100"
|
||
:autoCropWidth="100"
|
||
:multiple="false"
|
||
:isDes="false"
|
||
@changes="(url) => changeUpload(url, 'logo_url')"
|
||
/>
|
||
</li>
|
||
<li v-if="themeInfo.logo_status">LOGO位置</li>
|
||
<li v-if="themeInfo.logo_status">
|
||
<a-radio-group
|
||
@change="
|
||
(e) => {
|
||
handlerRadio(e, 'logo_site');
|
||
}
|
||
"
|
||
name="radioGroup"
|
||
v-model:value="themeInfo.logo_site"
|
||
>
|
||
<a-radio :value="1">居左</a-radio>
|
||
<a-radio :value="2">居中</a-radio>
|
||
<a-radio :value="3">居右</a-radio>
|
||
</a-radio-group>
|
||
</li>
|
||
</ul>
|
||
<div class="line"></div>
|
||
<ul class="stem">
|
||
<div class="stem-title">背景</div>
|
||
<li>
|
||
<div>显示背景</div>
|
||
<a-switch
|
||
v-model:checked="themeInfo.background_status"
|
||
@change="handlerStatus('background_status')"
|
||
></a-switch>
|
||
</li>
|
||
<li>
|
||
<div>背景颜色</div>
|
||
<ColorPicker
|
||
:defaultColor="themeInfo.background_color"
|
||
@choiceColor="(e) => handlerColorPicker(e, 'background_color')"
|
||
/>
|
||
</li>
|
||
<li>
|
||
<div>
|
||
上传背景
|
||
<PopConfirm
|
||
text="建议尺寸：宽度1920px，高度1080px格式要求：JPEG、PNG、JPG和GIF图片大小：2M以下"
|
||
/>
|
||
</div>
|
||
</li>
|
||
<li>
|
||
<ImageCard
|
||
v-if="themeInfo.background_url"
|
||
:url="themeInfo.background_url"
|
||
:autoCropHeight="1080"
|
||
:autoCropWidth="1920"
|
||
:multiple="false"
|
||
:type="0"
|
||
@remove="removeImg('background_url')"
|
||
@changes="(url) => changeUpload(url, 'background_url')"
|
||
/>
|
||
<ImageCard
|
||
v-else
|
||
:type="1"
|
||
:multiple="false"
|
||
:autoCropHeight="1080"
|
||
:autoCropWidth="1920"
|
||
:isDes="false"
|
||
@changes="(url) => changeUpload(url, 'background_url')"
|
||
/>
|
||
</li>
|
||
<li v-if="themeInfo.background_url">
|
||
<div>透明度</div>
|
||
<a-input-number
|
||
v-model:value="themeInfo.background_transparency"
|
||
:min="0"
|
||
:max="100"
|
||
:formatter="(value) => `${value}%`"
|
||
:parser="(value) => value.replace('%', '')"
|
||
@change="handlerBTransparency"
|
||
/>
|
||
</li>
|
||
<li v-if="themeInfo.background_url">
|
||
<div>显示方式</div>
|
||
<a-radio-group
|
||
v-model:value="themeInfo.background_site"
|
||
@change="
|
||
(e) => {
|
||
handlerRadio(e, 'background_site');
|
||
}
|
||
"
|
||
name="radioGroup"
|
||
>
|
||
<a-radio :value="1">平铺</a-radio>
|
||
<a-radio :value="2">居中</a-radio>
|
||
</a-radio-group>
|
||
</li>
|
||
</ul>
|
||
<div class="line"></div>
|
||
<div class="show">显示</div>
|
||
<div class="checkbox-group">
|
||
<div class="checkbox" v-for="(item, index) in optionList" :key="index">
|
||
<div v-if="item.isInput" class="input-box">
|
||
<a-input
|
||
size="small"
|
||
v-model:value="item.value"
|
||
:maxlength="8"
|
||
@blur="editButtonText(item)"
|
||
/>
|
||
</div>
|
||
<div v-else @change="handlerStatus(item.key, 'checked-box')">
|
||
<a-checkbox class="custom-checkbox" v-model:checked="item.checked">{{ item.label }}</a-checkbox>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import useThemeInfo from "../../hooks/theme";
|
||
import PopConfirm from "../PopConfirm/index.vue";
|
||
import ColorPicker from "../ColorPicker/index.vue";
|
||
import { debounce } from "lodash-es";
|
||
import ImageCard from "@/views/planetDesign/Design/components/ImageCard.vue";
|
||
import { message } from "ant-design-vue";
|
||
|
||
const { store, optionList, themeInfo, headerImgInfo, apiPostThemeStyle } = useThemeInfo();
|
||
|
||
const handlerColorPicker = (e, key) => {
|
||
themeInfo.value[key] = e.hex;
|
||
apiPostThemeStyle();
|
||
};
|
||
const handlerStatus = (key, type) => {
|
||
themeInfo.value[key] = type ? (themeInfo.value[key] ? 0 : 1) : themeInfo.value[key] ? 1 : 0;
|
||
apiPostThemeStyle();
|
||
};
|
||
const changeUpload = (url, key) => {
|
||
themeInfo.value[key] = url;
|
||
if (themeInfo.value[key] && key === "background_url") {
|
||
themeInfo.value.background_transparency = 100;
|
||
themeInfo.value.background_color = "#FFFFFF";
|
||
}
|
||
if (!headerImgInfo.value.checked) {
|
||
store.commit("common/HEADER_IMG_INFO", {
|
||
checked: true,
|
||
head_img_url: url,
|
||
});
|
||
}
|
||
apiPostThemeStyle();
|
||
};
|
||
const removeImg = (key) => {
|
||
themeInfo.value[key] = "";
|
||
apiPostThemeStyle();
|
||
if (key === "background_url") {
|
||
themeInfo.value.background_transparency = 100;
|
||
}
|
||
};
|
||
const handlerRadio = debounce((e, key) => {
|
||
themeInfo.value[key] = e.target.value;
|
||
apiPostThemeStyle();
|
||
}, 500);
|
||
const handlerBTransparency = debounce((e) => {
|
||
themeInfo.value.background_transparency = e;
|
||
apiPostThemeStyle();
|
||
}, 500);
|
||
|
||
// 编辑开始按钮和提交按钮文字
|
||
const editButtonText = (item) => {
|
||
if (item.value) {
|
||
themeInfo.value[item.key] = item.value;
|
||
} else {
|
||
message.error('按钮文字不能为空');
|
||
themeInfo.value[item.key] = item.default;
|
||
}
|
||
apiPostThemeStyle();
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.theme-right::-webkit-scrollbar {
|
||
width: 4px;
|
||
// background-color: #ffffff;
|
||
}
|
||
.theme-right::-webkit-scrollbar-thumb {
|
||
background-color: #D8D8D8;
|
||
border-radius: 10px;
|
||
}
|
||
.theme-right {
|
||
float: right;
|
||
width: 290px;
|
||
height: 100%;
|
||
background: #fafafa;
|
||
box-shadow: 0px 0px 6px 1px rgb(0 0 0 / 10%);
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
.title {
|
||
font-size: 16px;
|
||
font-family: PingFangSC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #262626;
|
||
margin: 27px 0 27px 20px;
|
||
}
|
||
.setting {
|
||
width: 250px;
|
||
// height: 1330px;
|
||
background: #ffffff;
|
||
border-radius: 6px;
|
||
margin-left: 20px;
|
||
margin-bottom: 20px;
|
||
border: 1px solid #fff;
|
||
.stem {
|
||
list-style: none;
|
||
padding: 32px 20px 10px 20px;
|
||
.stem-title {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #434343;
|
||
margin-bottom: 10px;
|
||
}
|
||
li {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
font-size: 12px;
|
||
font-family: PingFangSC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #434343;
|
||
}
|
||
}
|
||
.line {
|
||
width: 220px;
|
||
height: 1px;
|
||
background: #f5f5f5;
|
||
// margin: 0 15px 14px 15px;
|
||
margin: 0 15px;
|
||
}
|
||
.show {
|
||
font-size: 14px;
|
||
font-family: PingFangSC-Medium, PingFang SC;
|
||
font-weight: 500;
|
||
color: #434343;
|
||
padding: 32px 20px 10px;
|
||
}
|
||
.checkbox-group {
|
||
margin-left: 20px;
|
||
}
|
||
.checkbox {
|
||
margin-bottom: 10px;
|
||
|
||
.input-box {
|
||
padding: 0 24px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
::v-deep(.zs-color-picker-btn) {
|
||
opacity: 0;
|
||
}
|
||
::v-deep(.zs-color-picker) {
|
||
position: relative;
|
||
right: 40px;
|
||
}
|
||
::v-deep(.zs-color-picker-btn) {
|
||
width: 50px;
|
||
height: 32px;
|
||
border-radius: 4px;
|
||
border: 1px solid #d9d9d9;
|
||
}
|
||
::v-deep(.zs-color-picker-panel) {
|
||
position: absolute;
|
||
right: 30px;
|
||
}
|
||
</style>
|