|
|
|
@ -7,14 +7,12 @@ |
|
|
|
<el-col :span="3"> |
|
|
|
<span class="theme-prompt-text">风格</span> |
|
|
|
</el-col> |
|
|
|
<el-col |
|
|
|
v-for="item in styleList" |
|
|
|
:key="item.key" :span="3" |
|
|
|
> |
|
|
|
<span |
|
|
|
:class="{'style-btn-active':activeStyle==item.key}" |
|
|
|
class="style-btn" @click="activeStyleHandle(item)" |
|
|
|
>{{ item.label }}</span> |
|
|
|
<el-col v-for="item in styleList" |
|
|
|
:key="item.key" |
|
|
|
:span="3"> |
|
|
|
<span :class="{'style-btn-active':activeStyle==item.key}" |
|
|
|
class="style-btn" |
|
|
|
@click="activeStyleHandle(item)">{{ item.label }}</span> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<el-row> |
|
|
|
@ -22,119 +20,120 @@ |
|
|
|
<span class="theme-prompt-text">颜色</span> |
|
|
|
</el-col> |
|
|
|
<el-col :span="3"> |
|
|
|
<span |
|
|
|
:class="{'style-btn-active':activeColor==''}" |
|
|
|
class="style-btn" @click="activeColorHandle('')" |
|
|
|
>全部</span> |
|
|
|
<span :class="{'style-btn-active':activeColor==''}" |
|
|
|
class="style-btn" |
|
|
|
@click="activeColorHandle('')">全部</span> |
|
|
|
</el-col> |
|
|
|
<el-col |
|
|
|
v-for="c in colorList" |
|
|
|
:key="c" :class="{'style-btn-active':activeColor==c}" |
|
|
|
<el-col v-for="c in colorList" |
|
|
|
:key="c" |
|
|
|
:class="{'style-btn-active':activeColor==c}" |
|
|
|
:span="3" |
|
|
|
:style="{backgroundColor: c}" |
|
|
|
class="color-btn" @click.native="activeColorHandle(c)" |
|
|
|
/> |
|
|
|
class="color-btn" |
|
|
|
@click.native="activeColorHandle(c)" /> |
|
|
|
</el-row> |
|
|
|
<el-row> |
|
|
|
<el-col |
|
|
|
v-for="t in themeList" |
|
|
|
<el-col v-for="t in themeList" |
|
|
|
:key="t.id" |
|
|
|
:span="8" class="theme-img-view" |
|
|
|
@click.native="activeThemeHandle(t)" |
|
|
|
> |
|
|
|
:span="8" |
|
|
|
class="theme-img-view" |
|
|
|
@click.native="activeThemeHandle(t)"> |
|
|
|
<p :class="{'head-list-view-select':activeTheme.id==t.id}"> |
|
|
|
<el-image |
|
|
|
:class="{'head-list-img-active':activeTheme.id==t.id}" |
|
|
|
<el-image :class="{'head-list-img-active':activeTheme.id==t.id}" |
|
|
|
:src="t.headImgUrl" |
|
|
|
class="head-list-img" |
|
|
|
fit="cover" |
|
|
|
style="width: 100px; height: 100px;" |
|
|
|
/> |
|
|
|
style="width: 100px; height: 100px;" /> |
|
|
|
</p> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</el-scrollbar> |
|
|
|
</div> |
|
|
|
<pre-view :key="projectFormKey" :project-key="projectKey" /> |
|
|
|
<pre-view :key="projectFormKey" |
|
|
|
:project-key="projectKey" /> |
|
|
|
<div class="right-container"> |
|
|
|
<p class="right-title">外观设置</p> |
|
|
|
<el-row align="middle" class="option-line-view" type="flex"> |
|
|
|
<el-row align="middle" |
|
|
|
class="option-line-view" |
|
|
|
type="flex"> |
|
|
|
<el-col :span="8"> |
|
|
|
<span class="option-line-title">添加logo</span> |
|
|
|
</el-col> |
|
|
|
<el-col :offset="8" :span="8"> |
|
|
|
<el-switch |
|
|
|
v-model="showSettings.logoSetting" |
|
|
|
/> |
|
|
|
<el-col :offset="8" |
|
|
|
:span="8"> |
|
|
|
<el-switch v-model="showSettings.logoSetting" /> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<el-row v-if="showSettings.logoSetting" align="middle" type="flex"> |
|
|
|
<el-row v-if="showSettings.logoSetting" |
|
|
|
align="middle" |
|
|
|
type="flex"> |
|
|
|
<el-col :span="6"> |
|
|
|
<span class="option-line-sub-title">logo设置</span> |
|
|
|
</el-col> |
|
|
|
<el-col :span="4"> |
|
|
|
<img |
|
|
|
v-if="userProjectTheme.logoImg" |
|
|
|
<img v-if="userProjectTheme.logoImg" |
|
|
|
:src="userProjectTheme.logoImg" |
|
|
|
style="width: 30px; height: 30px;" |
|
|
|
> |
|
|
|
style="width: 30px; height: 30px;"> |
|
|
|
</el-col> |
|
|
|
<el-col :offset="6" :span="8"> |
|
|
|
<el-upload |
|
|
|
ref="logoUpload" |
|
|
|
<el-col :offset="6" |
|
|
|
:span="8"> |
|
|
|
<el-upload ref="logoUpload" |
|
|
|
:action="getUploadUrl" |
|
|
|
:headers="getUploadHeader" |
|
|
|
:on-success="uploadLogoHandle" |
|
|
|
:show-file-list="false" |
|
|
|
accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP" |
|
|
|
> |
|
|
|
<el-button slot="trigger" size="small" type="text">上传Logo</el-button> |
|
|
|
accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"> |
|
|
|
<el-button slot="trigger" |
|
|
|
size="small" |
|
|
|
type="text">上传Logo</el-button> |
|
|
|
</el-upload> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<el-row v-if="showSettings.logoSetting" align="middle" type="flex"> |
|
|
|
<el-row v-if="showSettings.logoSetting" |
|
|
|
align="middle" |
|
|
|
type="flex"> |
|
|
|
<el-col :span="6"> |
|
|
|
<span class="option-line-sub-title">logo位置</span> |
|
|
|
</el-col> |
|
|
|
<el-col :span="18"> |
|
|
|
<el-radio-group |
|
|
|
v-model="userProjectTheme.logoPosition" |
|
|
|
size="mini" @change="saveUserTheme" |
|
|
|
> |
|
|
|
<el-radio-group v-model="userProjectTheme.logoPosition" |
|
|
|
size="mini" |
|
|
|
@change="saveUserTheme"> |
|
|
|
<el-radio-button label="left">左对齐</el-radio-button> |
|
|
|
<el-radio-button label="center">居中</el-radio-button> |
|
|
|
<el-radio-button label="right">右对齐</el-radio-button> |
|
|
|
</el-radio-group> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<el-row align="middle" class="option-line-view" type="flex"> |
|
|
|
<el-row align="middle" |
|
|
|
class="option-line-view" |
|
|
|
type="flex"> |
|
|
|
<el-col :span="8"> |
|
|
|
<span class="option-line-title">背景设置</span> |
|
|
|
</el-col> |
|
|
|
<el-col :offset="8" :span="8"> |
|
|
|
<el-switch |
|
|
|
v-model="showSettings.backgroundSetting" |
|
|
|
<el-col :offset="8" |
|
|
|
:span="8"> |
|
|
|
<el-switch v-model="showSettings.backgroundSetting" |
|
|
|
@change="()=>{ |
|
|
|
this.userProjectTheme.backgroundImg='' |
|
|
|
this.userProjectTheme.backgroundColor='' |
|
|
|
this.saveUserTheme() |
|
|
|
}" |
|
|
|
/> |
|
|
|
}" /> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<el-row v-if="showSettings.backgroundSetting"> |
|
|
|
<el-row align="middle" type="flex"> |
|
|
|
<el-row align="middle" |
|
|
|
type="flex"> |
|
|
|
<el-col :span="8"> |
|
|
|
<span class="option-line-sub-title">背景类型</span> |
|
|
|
</el-col> |
|
|
|
<el-col :spvan="18"> |
|
|
|
<el-radio-group |
|
|
|
v-model="showSettings.backgroundType" |
|
|
|
size="mini" @change="()=>{ |
|
|
|
<el-radio-group v-model="showSettings.backgroundType" |
|
|
|
size="mini" |
|
|
|
@change="()=>{ |
|
|
|
this.userProjectTheme.backgroundImg='' |
|
|
|
this.userProjectTheme.backgroundColor='' |
|
|
|
}" |
|
|
|
> |
|
|
|
}"> |
|
|
|
<el-radio-button label="color">颜色</el-radio-button> |
|
|
|
<el-radio-button label="img">图片</el-radio-button> |
|
|
|
</el-radio-group> |
|
|
|
@ -142,51 +141,53 @@ |
|
|
|
</el-row> |
|
|
|
</el-row> |
|
|
|
<el-row v-if="showSettings.backgroundSetting&&showSettings.backgroundType=='color'"> |
|
|
|
<el-row align="middle" type="flex"> |
|
|
|
<el-row align="middle" |
|
|
|
type="flex"> |
|
|
|
<el-col :span="8"> |
|
|
|
<span class="option-line-sub-title">选择颜色</span> |
|
|
|
</el-col> |
|
|
|
<el-col :spvan="18"> |
|
|
|
<el-color-picker |
|
|
|
v-model=" userProjectTheme.backgroundColor" |
|
|
|
<el-color-picker v-model=" userProjectTheme.backgroundColor" |
|
|
|
size="mini" |
|
|
|
@change="saveUserTheme" |
|
|
|
/> |
|
|
|
@change="saveUserTheme" /> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</el-row> |
|
|
|
<el-row v-if="showSettings.backgroundType=='img'"> |
|
|
|
<el-row align="middle" type="flex"> |
|
|
|
<el-row align="middle" |
|
|
|
type="flex"> |
|
|
|
<el-col :span="8"> |
|
|
|
<span class="option-line-sub-title">选择图片</span> |
|
|
|
</el-col> |
|
|
|
<el-col :spvan="18"> |
|
|
|
<el-upload |
|
|
|
ref="upload" |
|
|
|
<el-upload ref="upload" |
|
|
|
:action="getUploadUrl" |
|
|
|
:headers="getUploadHeader" |
|
|
|
:on-success="uploadBackgroundHandle" |
|
|
|
:show-file-list="false" |
|
|
|
accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP" |
|
|
|
class="upload-demo" |
|
|
|
> |
|
|
|
<el-button slot="trigger" size="small" type="text">上传背景</el-button> |
|
|
|
class="upload-demo"> |
|
|
|
<el-button slot="trigger" |
|
|
|
size="small" |
|
|
|
type="text">上传背景</el-button> |
|
|
|
</el-upload> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</el-row> |
|
|
|
<el-row align="middle" class="option-line-view" type="flex"> |
|
|
|
<el-row align="middle" |
|
|
|
class="option-line-view" |
|
|
|
type="flex"> |
|
|
|
<el-col :span="8"> |
|
|
|
<span class="option-line-title">按钮设置</span> |
|
|
|
</el-col> |
|
|
|
<el-col :offset="8" :span="8"> |
|
|
|
<el-switch |
|
|
|
v-model="showSettings.btnSetting" |
|
|
|
/> |
|
|
|
<el-col :offset="8" |
|
|
|
:span="8"> |
|
|
|
<el-switch v-model="showSettings.btnSetting" /> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<el-row v-if="showSettings.btnSetting"> |
|
|
|
<el-row align="middle" type="flex"> |
|
|
|
<el-row align="middle" |
|
|
|
type="flex"> |
|
|
|
<el-col :span="12"> |
|
|
|
<span class="option-line-sub-title">按钮提示文字</span> |
|
|
|
</el-col> |
|
|
|
@ -194,42 +195,45 @@ |
|
|
|
<el-input v-model="userProjectTheme.submitBtnText" |
|
|
|
placeholder="请输入内容" |
|
|
|
size="mini" |
|
|
|
style="width: 80%;" @change="saveUserTheme" |
|
|
|
/> |
|
|
|
style="width: 80%;" |
|
|
|
@change="saveUserTheme" /> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</el-row> |
|
|
|
<el-row align="middle" class="option-line-view" type="flex"> |
|
|
|
<el-row align="middle" |
|
|
|
class="option-line-view" |
|
|
|
type="flex"> |
|
|
|
<el-col :span="8"> |
|
|
|
<span class="option-line-title">显示标题</span> |
|
|
|
</el-col> |
|
|
|
<el-col :offset="8" :span="8"> |
|
|
|
<el-switch |
|
|
|
v-model="userProjectTheme.showTitle" |
|
|
|
@change="saveUserTheme" |
|
|
|
/> |
|
|
|
<el-col :offset="8" |
|
|
|
:span="8"> |
|
|
|
<el-switch v-model="userProjectTheme.showTitle" |
|
|
|
@change="saveUserTheme" /> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<el-row align="middle" class="option-line-view" type="flex"> |
|
|
|
<el-row align="middle" |
|
|
|
class="option-line-view" |
|
|
|
type="flex"> |
|
|
|
<el-col :span="8"> |
|
|
|
<span class="option-line-title">显示描述</span> |
|
|
|
</el-col> |
|
|
|
<el-col :offset="8" :span="8"> |
|
|
|
<el-switch |
|
|
|
v-model="userProjectTheme.showDescribe" |
|
|
|
@change="saveUserTheme" |
|
|
|
/> |
|
|
|
<el-col :offset="8" |
|
|
|
:span="8"> |
|
|
|
<el-switch v-model="userProjectTheme.showDescribe" |
|
|
|
@change="saveUserTheme" /> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
<el-row align="middle" class="option-line-view" type="flex"> |
|
|
|
<el-row align="middle" |
|
|
|
class="option-line-view" |
|
|
|
type="flex"> |
|
|
|
<el-col :span="8"> |
|
|
|
<span class="option-line-title">显示序号</span> |
|
|
|
</el-col> |
|
|
|
<el-col :offset="8" :span="8"> |
|
|
|
<el-switch |
|
|
|
v-model="userProjectTheme.showNumber" |
|
|
|
@change="saveUserTheme" |
|
|
|
/> |
|
|
|
<el-col :offset="8" |
|
|
|
:span="8"> |
|
|
|
<el-switch v-model="userProjectTheme.showNumber" |
|
|
|
@change="saveUserTheme" /> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
</div> |
|
|
|
@ -303,7 +307,7 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
getUploadUrl () { |
|
|
|
return `${process.env.VUE_APP_API_ROOT}/user/file/upload` |
|
|
|
return `${process.env.VUE_APP_API_ROOT}${process.env.VUE_APP_API_ROOT_TDUCK}/user/file/upload` |
|
|
|
} |
|
|
|
}, |
|
|
|
mounted () { |
|
|
|
@ -467,7 +471,7 @@ export default { |
|
|
|
} |
|
|
|
.theme-img-view .head-list-view-select ::after { |
|
|
|
content: ""; |
|
|
|
background: url('~@/assets/images/mobile_theme_active.png'); |
|
|
|
background: url("~@/assets/images/mobile_theme_active.png"); |
|
|
|
background-size: 18px; |
|
|
|
width: 18px; |
|
|
|
height: 18px; |
|
|
|
|
jianjun
4 years ago