zhangqi
/
kuailelunwen_new_houtai
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

实时预览-页面色彩

pull/79/head^2
zq 3 days ago
committed by pengda
parent
dac82c145e
commit
c8d17fedea
3 changed files with 233 additions and 30 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 116
      src/components/preview/logoBack_color.vue
  2. 127
      src/components/site/serviceSetting/menuColorSet.vue
  3. 20
      src/style/theme/common.scss

116
src/components/preview/logoBack_color.vue
View File

@ -0,0 +1,116 @@
<template>
<div class="preview_color">
<div class="top" :style="{backgroundColor:themeColor}">品牌LOGO</div>
<div class="bottom flex">
<div class="left">
<span class="desc">获取帮助</span>
<div class="left-item">常见问题</div>
<div class="left-item">联系客服</div>
<div class="left-item">报告样例</div>
</div>
<div class="right">
<p class="scroll" >正在检测文章的滚动条</p>
<div class="tab flex" :style="{backgroundColor:navColor}">
<div class="tab_item" :style="{backgroundColor:tabColor}">检测论文</div>
<div class="tab_item">下载检测报告</div>
<div class="tab_item">下载检测报告</div>
</div>
<div class="right_bot column">
<b>检测上传板块</b>
<button :style="{backgroundColor:themeColor}">提交论文</button>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
// 站点设置
name: '',
props: ['themeColor','navColor','tabColor'],
components: {
},
data() {
return {
}
}
}
</script>
<style scoped lang="scss">
.preview_color{
width: 100%;
.top{
padding: 12px 27px;
color: #FFFFFF;
box-sizing: border-box;
border-radius: 12px 12px 0 0;
}
.bottom{
font-size: 12px;
display: flex;
align-items: flex-start;
.left{
width: 100px;
text-align: center;
padding: 14px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 7px;
.desc{
display: block;
color: #626573;
margin-bottom: 10px;
}
.left-item{
padding: 7px 9px;
border-radius: 4px;
box-sizing: border-box;
border: 1px solid #475DB9;
font-size: 12px;
font-weight: normal;
line-height: 13px;
letter-spacing: 0.08em;
color: #3B4D98;
}
}
.right{
flex: 1;
.scroll{
background: #E9F6FD;
padding: 7px 14px;
box-sizing: border-box;
line-height: 28px;
font-size: 12px;
line-height: 13px;
letter-spacing: 0.08em;
color: #626573;
}
.tab{
color: #fff;
.tab_item{
padding: 8px 12px;
}
}
.right_bot{
padding: 25px 24px 17px;
background: #FFFFFF;
b{
display: block;
margin-bottom: 20px;
}
button{
font-family: Microsoft YaHei UI;
border-radius: 4px;
border: none;
padding: 7px 10px;
color: #fff;
letter-spacing: 0.08em;
}
}
}
}
}
</style>

127
src/components/site/serviceSetting/menuColorSet.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="main-content12">
<div class="main">
<div class="pageheader">
<span class="pagetitle">基本设置</span>
</div>
@ -10,18 +10,20 @@
<div class="flex-wrap">
<div class="flex-left">
<GuipFormItem column="column" label="提交页Logo上传">
<hover-button slot="formDom" ref="GuipInput" button-text="选择图片" :default-icon="require('@/assets/upLoad_grey.svg')"
:hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
hover-text-color="#006AFF"/>
<hover-button slot="formDom" ref="GuipInput" button-text="选择图片"
:default-icon="require('@/assets/upLoad_grey.svg')"
:hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
hover-text-color="#006AFF" />
</GuipFormItem>
<div slot="tip" class="el-upload__tip desc">支持png、jpg格式，尺寸32PX*32PX</div>
</div>
<div class="flex-line "></div>
<div class="flex-right">
<GuipFormItem column="column" label="报告页Logo上传">
<hover-button slot="formDom" ref="GuipInput" button-text="选择图片" :default-icon="require('@/assets/upLoad_grey.svg')"
:hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
hover-text-color="#006AFF"/>
<hover-button slot="formDom" ref="GuipInput" button-text="选择图片"
:default-icon="require('@/assets/upLoad_grey.svg')"
:hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
hover-text-color="#006AFF" />
</GuipFormItem>
<div slot="tip" class="el-upload__tip desc">支持png、jpg格式，尺寸32PX*32PX</div>
</div>
@ -29,19 +31,52 @@
</el-form>
</div>
<div class="flex-common">
<div class="flex-common mt12">
<h3 class="mb16">页面色彩</h3>
<PromptText text='操作说明：点击色块可打开调色盘改色，也可直接更改6位色值数据进行改色' :type="1" class="mb32"/>
<PromptText text='操作说明：点击色块可打开调色盘改色，也可直接更改6位色值数据进行改色' :type="1" class="mb32" />
<el-form ref="formRef">
<div class="flex-wrap">
<div class="flex-left">
aaa
<GuipFormItem column="column" label="主题颜色">
<span class="desc" slot="formRight"> 按钮及提示文字颜色</span>
<div class="flex gap12" slot="formDom">
<el-color-picker popper-class="color-drop" v-model="themeColor"></el-color-picker>
<GuipInput ref="GuipInput" style="flex:1" v-model="themeColor" placeholder="请输入主题颜色"
@change="changeThemeColor">
</GuipInput>
</div>
</GuipFormItem>
<GuipFormItem column="column" class="mt24" label="选中颜色">
<span class="desc" slot="formRight"> 分页导航栏选中色</span>
<div class="flex gap12" slot="formDom">
<el-color-picker popper-class="color-drop" v-model="tabColor"></el-color-picker>
<GuipInput ref="GuipInput" style="flex:1" v-model="tabColor" placeholder="请输入选中颜色"
@change="changetabColor">
</GuipInput>
</div>
</GuipFormItem>
<GuipFormItem column="column" class="mt24" label="导航栏色">
<span class="desc" slot="formRight"> logo处导航栏背景色</span>
<div class="flex gap12" slot="formDom">
<el-color-picker popper-class="color-drop" v-model="navColor"></el-color-picker>
<GuipInput ref="GuipInput" style="flex:1" v-model="navColor" placeholder="请输入导航栏色"
@change="changeNavColor">
</GuipInput>
</div>
</GuipFormItem>
</div>
<div class="flex-line "></div>
<div class="flex-right">
bbb
<DevicePreview :showMobile="false">
<template #desktop>
<!-- 电脑端内容 -->
<LogoBackColor :themeColor="themeColor" :navColor="navColor" :tabColor="tabColor"/>
</template>
</DevicePreview>
</div>
</div>
</el-form>
@ -58,30 +93,66 @@ import HoverButton from "@/components/HoverButton.vue";
import GuipFormItem from "@/components/GuipFormItem.vue";
import PromptText from "@/components/PromptText.vue";
import GuipButton from "@/components/GuipButton.vue";
import DevicePreview from "@/components/PreviewTab.vue";
import LogoBackColor from "@/components/preview/logoBack_color.vue";
import GuipInput from '@/components/GuipInput.vue';
export default {
name: '',
props:[],
components: {
GuipButton, PromptText, GuipFormItem, HoverButton
name: '',
props: [],
components: {
GuipButton,
PromptText,
GuipFormItem,
HoverButton,
DevicePreview,
LogoBackColor,
GuipInput
},
data(){
return {
//添加按钮样式
saveBtnStyleObj: {
width: '144px',
height: '46px',
borderRadius: '4px',
background: '#006AFF',
},
options: { styleIsolation: "shared" },
data() {
return {
themeColor:'#3B82F6',
navColor:'#3B82F6',
tabColor:'#70A6FF',
//添加按钮样式
saveBtnStyleObj: {
width: '144px',
height: '46px',
borderRadius: '4px',
background: '#006AFF',
},
}
},
methods: {
changeThemeColor(val){
if (!val.trim().startsWith("#")){
this.themeColor = '#'+ val.trim()
console.log(this.themeColor,'=====xiugai');
}
},
changetabColor(val){
if (!val.trim().startsWith("#")){
this.tabColor = '#'+ val.trim()
}
},
changeNavColor(val){
if (!val.trim().startsWith("#")){
this.navColor = '#'+ val.trim()
}
}
}
},
methods:{
}
}
</script>
<style lang="scss">
.color-drop .el-color-dropdown__btns{
display: flex;
justify-content: space-between;
}
.color-drop .el-button {
width: 70px;
height: 30px;
}
</style>

20
src/style/theme/common.scss
View File

@ -236,7 +236,7 @@ body {
.flex-common{
.flex-left,
.flex-right {
min-width: 440px;
// min-width: 440px;
max-width: 590px;
flex: 1;
}
@ -256,6 +256,22 @@ body {
/* text/text_4 */
color: #8A9099;
}
// 颜色选择器
.el-color-picker__trigger{
padding: 0;
border: none;
// border: 1px solid #DFE2E6;
.el-color-picker__color{
border-color: #DFE2E6;
border-radius: 4px;
}
.el-color-picker__icon{
display: none !important;
}
.el-color-picker__color-inner{
border-radius: 4px;
}
}
.borderNone{
border: none !important;
}
@ -288,7 +304,7 @@ body {
.flex-left,
.flex-right {
min-width: 460px;
// min-width: 460px;
max-width: 590px;
flex: 1;
}

Write Preview
Loading…
Cancel
Save