From 4a800a8fc83c6bd1f86a8e847b079a51a7532c09 Mon Sep 17 00:00:00 2001
From: zhangzengfei <zhangzengfei@smartai.com>
Date: 星期三, 20 七月 2022 15:05:58 +0800
Subject: [PATCH] 修复国标配置的bug
---
src/pages/settings/views/generalSettings.vue | 818 +++++++++++++++++++++++++++++++++++++++++-----------------
1 files changed, 580 insertions(+), 238 deletions(-)
diff --git a/src/pages/settings/views/generalSettings.vue b/src/pages/settings/views/generalSettings.vue
index db17136..2cd47a2 100644
--- a/src/pages/settings/views/generalSettings.vue
+++ b/src/pages/settings/views/generalSettings.vue
@@ -1,6 +1,6 @@
<template>
<div class="all" ref="curPage">
- <div class="general-set">
+ <div class="general-seting">
<div class="general-center" ref="left">
<div
class="menu-item"
@@ -9,102 +9,69 @@
v-for="(item, i) in menuArr"
:key="i"
>
- <span class="iconfont" :style="`font-size:${item.size}px;`">{{ item.icon }}</span>
+ <span class="iconfont" :style="`font-size:${item.size}px;`">{{
+ item.icon
+ }}</span>
<span class="title">{{ item.name }}</span>
</div>
</div>
<div class="general-right">
- <div class="lang" v-if="activePage == 0">
- <div class="bar">
- <span class="name">璁惧ID</span>
- <span class="desc">{{ deviceInfo.server_id }}</span>
- </div>
- <div class="bar">
- <span class="name">璁惧鍨嬪彿</span>
- <span class="desc">{{ deviceInfo.deviceModel }}</span>
- </div>
- <div class="bar">
- <span class="name">璁惧绫诲瀷</span>
- <span class="desc">{{ deviceInfo.deviceDesc }}</span>
- </div>
- <div class="bar">
- <span class="name">閫氶亾涓暟</span>
- <span class="desc">{{ deviceInfo.channelCount }}</span>
- </div>
- <div class="bar">
- <span class="name">涓绘帶鐗堟湰</span>
- <span class="desc">{{ deviceInfo.masterVersion }}</span>
- </div>
- <div class="bar">
- <span class="name">web鐗堟湰</span>
- <span class="desc">{{ deviceInfo.webVersion }}</span>
- </div>
- <div class="bar">
- <span class="name">纭洏淇℃伅</span>
- <span class="desc">{{ deviceInfo.disks }}</span>
- </div>
- <div class="bar">
- <span class="name">CPU</span>
- <span class="desc">{{ deviceInfo.cpu }}</span>
- </div>
- <div class="bar">
- <span class="name">鍐呭瓨</span>
- <span class="desc">{{ deviceInfo.memory }}</span>
- </div>
- <div class="bar">
- <span class="name">杩愯鏃堕棿</span>
- <span class="desc">{{ deviceInfo.runningTime }}</span>
- </div>
- </div>
- <div class="lang" v-if="activePage == 1">
+ <div class="lang videoTime" v-if="activePage == 0">
<div class="min-dur">
<div class="title">鎶撴媿鍓嶅綍鍍忔椂闀�</div>
<div class="entity">
- <div class="sec">{{ min_video_len }}s</div>
+ <div class="sec">0s</div>
<div class="block">
<el-slider
v-model="fakeObj.min"
id="cut_min_duration"
- :min="5 / 1.2"
- :max="100" :step="5 / 1.2"
+ :min="0"
+ :max="100"
+ :step="5 / 1.2"
@input="min_len = min_video_len"
show-stops
:show-tooltip="true"
+ tooltip-class="toolClass"
:format-tooltip="formatTooltip"
></el-slider>
</div>
+ <div class="sec" style="margin: 0 20px">120s</div>
<el-input-number
v-model="min_len"
@change="fakeObj.min = +(min_len / 1.2)"
- controls-position="right"
- :min="5" :step="5"
- :max="120" step-strictly
+ :min="0"
+ :step="5"
+ :max="120"
+ step-strictly
size="small"
></el-input-number
- > s
+ >s
</div>
</div>
<div class="min-dur">
<div class="title">鎶撴媿鍚庡綍鍍忔椂闀�</div>
<div class="entity">
- <div class="sec">{{ max_video_len }} s</div>
+ <div class="sec">0s</div>
<div class="block">
<el-slider
v-model="fakeObj.max"
id="cut_max_duration"
- :min="5 / 1.2"
+ :min="0"
@input="max_len = max_video_len"
- :max="100" :step="5 / 1.2"
+ :max="100"
+ :step="5 / 1.2"
show-stops
:format-tooltip="formatTooltip"
:show-tooltip="true"
></el-slider>
</div>
+ <div class="sec" style="margin: 0 20px">120s</div>
<el-input-number
v-model="max_len"
@change="fakeObj.max = +(max_len / 1.2)"
- controls-position="right"
- :min="5" :step="5" step-strictly
+ :min="0"
+ :step="5"
+ step-strictly
:max="120"
size="small"
></el-input-number
@@ -114,57 +81,81 @@
<div class="save-btn" @click="submitAlarm">淇濆瓨</div>
</div>
- <div class="lang" v-if="activePage == 2">
- <div class="title">浜嬩欢澹伴煶</div>
+ <div class="lang" v-if="activePage == 1">
+ <div class="bar title voice-title" style="border: 2px solid #fff">
+ 浜嬩欢澹伴煶
+ </div>
<div class="bar-group">
<div
- class="bar"
+ class="general-bar"
v-for="(item, i) in soundList"
:key="i"
@click="clickSound(item, i)"
ref="soundBar"
>
<div class="left-part">
- <span
- class="icon iconfont"
- style="margin-right: 12px; color: dodgerblue"
- ></span
- >
<span class="name">{{ item.name }}</span>
</div>
- <div class="btns">
+ <div class="sound-btns">
<span @click="togglePlay(item, i)">
+ <span
+ class="iconfont"
+ v-if="!item.isPlay"
+ style="cursor: pointer"
+ >{{ playSpan }}</span
+ >
+ <!-- <span class="iconfont" v-else style="cursor: pointer">{{
+ playSpan2
+ }}</span> -->
+
+ <img
+ v-else
+ src="/images/settings/鏆傚仠.png"
+ alt=""
+ style="
+ width: 16px;
+ hight: 16px;
+ cursor: pointer;
+ margin-top: 15px;
+ "
+ />
+ <!--
<i
v-if="!item.isPlay"
class="el-icon-video-play"
style=""
></i>
- <i v-else class="el-icon-video-pause"></i>
+ <i v-else class="el-icon-video-pause"></i> -->
</span>
<span
- class="icon iconfont"
- style="cursor: pointer; color: indianred"
+ class="icon iconfont del"
+ style="cursor: pointer"
@click="removeSound(item)"
- ></span
+ >{{ delspan }}</span
>
</div>
</div>
</div>
- <el-upload
- class="upload-demo"
- drag
- action="https://jsonplaceholder.typicode.com/posts/"
- :http-request="uploadSound"
- v-if="showUpload"
- :show-file-list="false"
- >
- <i class="el-icon-upload"></i>
- <div class="el-upload__text">
- 浜嬩欢澹伴煶鏂囦欢鎷栧埌姝ゅ锛屾垨
- <em>鐐瑰嚮涓婁紶</em>
- <br />浠呮敮鎸乵p3/wma绛夋牸寮�
- </div>
- </el-upload>
+ <div v-if="showUpload" @click.stop>
+ <el-upload
+ class="upload-demo"
+ drag
+ action=""
+ :http-request="uploadSound"
+ :show-file-list="false"
+ style="bottom: -94px; left: calc(50% - 217px)"
+ >
+ <div class="info">
+ 璇峰皢澹伴煶浜嬩欢鏂囦欢鎷栨嫿鍒版澶勶紝鎴�<span class="info-click"
+ >鐐瑰嚮涓婁紶</span
+ >
+ </div>
+ <div class="des" v-if="showUpload" @click.stop>
+ 浠呮敮鎸乵p3銆亀av绛夋牸寮�
+ </div>
+ </el-upload>
+ </div>
+
<div class="add-group">
<div class="add-btn">
<span class="icon iconfont" @click.stop="showUpload = !showUpload"
@@ -174,16 +165,44 @@
</div>
</div>
- <div class="self-setting" v-if="activePage == 3">
- <div class="top-title">鍥炬爣涓婚</div>
+ <div class="self-setting" v-if="activePage == 2">
+ <div class="top-title">棰滆壊涓婚</div>
+ <div class="color-bar">
+ <div
+ v-for="(item, index) in colorList"
+ :key="index"
+ style="border: none"
+ >
+ <div
+ class="color-option"
+ v-if="universalColor != index"
+ :style="{ cursor: 'pointer', backgroundColor: item.color }"
+ @click="colorCard(item.color, index)"
+ />
+ <div
+ class="color-option color-option-active"
+ v-else
+ :style="{
+ cursor: 'pointer',
+ border: `2px solid ${item.color}`,
+ }"
+ @click="colorCard(item.color, index)"
+ >
+ <div
+ :style="{ backgroundColor: item.color }"
+ class="color-option-content"
+ ></div>
+ </div>
+ </div>
+ </div>
+ <div class="top-title">鍥炬爣涓婚</div>
<div class="icon-bar" style="cursor: pointer" @click="selectIcons(0)">
<div class="bar-title">
- <span class="title">鎵佸钩鍐欏疄鍥炬爣</span>
+ <span class="title">闈㈡�ч鏍�</span>
<span
class="icon iconfont"
- style="color: #3d68e1; font-size: 18px"
- v-show="activeIcons == 0"
+ :class="activeIcons == 0 ? 'icon-active' : 'icon-normal'"
></span
>
</div>
@@ -199,11 +218,10 @@
</div>
<div class="icon-bar" style="cursor: pointer" @click="selectIcons(1)">
<div class="bar-title">
- <span class="title">鎵佸钩鍖栧浘鏍�</span>
+ <span class="title">绠�绾﹂鏍�</span>
<span
class="icon iconfont"
- style="color: #3d68e1; font-size: 18px"
- v-show="activeIcons == 1"
+ :class="activeIcons == 1 ? 'icon-active' : 'icon-normal'"
></span
>
</div>
@@ -217,13 +235,14 @@
</div>
</div>
</div>
+
<div class="top-title">妗岄潰鑳屾櫙涓婚</div>
<div class="bg-bar">
<div class="bg-list">
<div
+ v-for="(item, i) in tableBGList"
class="bg-img"
:class="activeBg == i ? 'bg-list-active' : ''"
- v-for="(item, i) in tableBGList"
:key="i"
@click="pickBg(item, i)"
>
@@ -240,11 +259,14 @@
<script>
import { saveAlarmConfig, getDevInfo } from "@/api/system";
import { uploadSound, getSoundList, deleteSound } from "@/api/event";
-// import config from "../../../../package.json";
-
+import { updateUser } from "@/api/user";
export default {
data() {
return {
+ playSpan: "\ue75e",
+ playSpan2: "\ue75f",
+ delspan: "\ue715",
+ warnSpn: "\ue71c",
curPlayingIndex: null,
showUpload: false,
activeIcons: 0,
@@ -255,10 +277,9 @@
max: 0,
},
menuArr: [
- { name: "璁惧淇℃伅", icon: "\ue933" ,size:18},
- { name: "浜嬩欢褰曞儚鏃堕暱", icon: "\ue6f3" ,size:20},
- { name: "浜嬩欢澹伴煶", icon: "\ue6e1" ,size:16},
- { name: "涓�у寲璁剧疆", icon: "\ue756" ,size:18},
+ { name: "浜嬩欢褰曞儚鏃堕暱", icon: "\ue74f", size: 20 },
+ { name: "浜嬩欢澹伴煶", icon: "\ueb5e", size: 16 },
+ { name: "涓�у寲璁剧疆", icon: "\ue750", size: 18 },
],
soundList: [],
activePage: 0,
@@ -278,50 +299,64 @@
},
isPlay: false,
realIconList: [
- { url: "/images/settings/鏃ュ織绠＄悊.png" },
- { url: "/images/settings/瀹炴椂鐩戞帶.png" },
- { url: "/images/settings/鏁版嵁鍙鍖�.png" },
+ { url: "/images/settings/闈㈡�у浘鏍�/1浠板崸妫�娴�.png" },
+ { url: "/images/settings/闈㈡�у浘鏍�/2涓綋闈欐.png" },
+ { url: "/images/settings/闈㈡�у浘鏍�/3瀹夊叏璀︽垝.png" },
+ { url: "/images/settings/闈㈡�у浘鏍�/4瀹夊叏甯芥娴�.png" },
+ { url: "/images/settings/闈㈡�у浘鏍�/5濂旇窇.png" },
+ { url: "/images/settings/闈㈡�у浘鏍�/6杞﹁締妫�娴�.png" },
+ { url: "/images/settings/闈㈡�у浘鏍�/7鎶界儫.png" },
],
flatIconList: [
- { url: "/images/settings/鏁版嵁鎺ㄩ��.png" },
- { url: "/images/settings/鏁版嵁鏍堥厤缃�.png" },
- { url: "/images/settings/绯荤粺璁剧疆.png" },
+ { url: "/images/settings/绠�绾﹀浘鏍�/1浠板崸妫�娴�.png" },
+ { url: "/images/settings/绠�绾﹀浘鏍�/2涓綋闈欐.png" },
+ { url: "/images/settings/绠�绾﹀浘鏍�/3瀹夊叏璀︽垝.png" },
+ { url: "/images/settings/绠�绾﹀浘鏍�/4瀹夊叏甯芥娴�.png" },
+ { url: "/images/settings/绠�绾﹀浘鏍�/5濂旇窇.png" },
+ { url: "/images/settings/绠�绾﹀浘鏍�/6杞﹁締妫�娴�.png" },
+ { url: "/images/settings/绠�绾﹀浘鏍�/7鎶界儫.png" },
],
tableBGList: [
- { name: "background", url: "/images/settings/background.png" },
- { name: "message", url: "/images/settings/鏁版嵁鎺ㄩ��.png" },
- { name: "weather", url: "/images/settings/绯荤粺璁剧疆.png" },
+ { name: "background", url: "/images/desktop/background.png" },
+ { name: "message", url: "/images/desktop/message.png" },
+ { name: "weather", url: "/images/desktop/weather.png" },
+ ],
+ universalColor: "",
+ colorList: [
+ { name: 1, color: "#FC6B9E" },
+ { name: 2, color: "#F38F56" },
+ { name: 3, color: "#FDD33A" },
+ { name: 4, color: "#53D999" },
+ { name: 5, color: "#21CDB2" },
+ { name: 6, color: "#61E2EB" },
+ { name: 7, color: "#4E94FF" },
+ { name: 8, color: "#8E8CD8" },
+ { name: 9, color: "#4C4A48" },
],
};
},
mounted() {
this.getDeviceInfo();
this.getSounds();
- let _this = this;
- this.eventAudio.addEventListener("ended", () => {
- if (_this.curPlayingIndex !== null && _this.soundList.length) {
- _this.soundList[_this.curPlayingIndex].isPlay = false;
- _this.curPlayingIndex = null;
- }
+ const url = this.curUser.backgroundpic;
+ this.activeIcons = this.curUser.useIconType - 1;
+ this.universalColor = this.colorList.findIndex((x) => {
+ return x.color == localStorage.getItem("--colorCard");
});
- const url = localStorage.getItem("backgroundPic")
if (url) {
- const arr = url.split("/")
- this.activeBg= this.tableBGList.findIndex((x) => {
- return x.url.includes(arr[arr.length-1])
- })
- }else{
- this.activeBg= 0
+ this.activeBg = this.tableBGList.findIndex((x) => {
+ return x.url == url;
+ });
+ } else {
+ this.activeBg = 0;
}
- const e = this.$refs.curPage
- e.addEventListener("click", (e) => {
- if (this.showUpload) {
- this.showUpload = false;
- }
- });
+
+ this.eventAudio.addEventListener("ended", this.endedHandle, false);
+ this.$refs.curPage.addEventListener("click", this.clickHandle, false);
},
beforeDestroy() {
- this.$refs.curPage.removeEventListener("click")
+ this.eventAudio.removeEventListener("ended", this.endedHandle, false);
+ this.$refs.curPage.removeEventListener("click", this.clickHandle, false);
},
computed: {
min_video_len() {
@@ -330,20 +365,42 @@
max_video_len() {
return Math.round(this.fakeObj.max * 1.2);
},
+ curUser() {
+ return JSON.parse(sessionStorage.getItem("userInfo"));
+ },
},
methods: {
+ endedHandle() {
+ let _this = this;
+ if (_this.curPlayingIndex !== null && _this.soundList.length) {
+ _this.soundList[_this.curPlayingIndex].isPlay = false;
+ _this.curPlayingIndex = null;
+ }
+ },
+ clickHandle() {
+ let _this = this;
+ if (this.showUpload) {
+ this.showUpload = false;
+ }
+ },
formatTooltip(v) {
return Math.round(v * 1.2);
},
pickBg(item, i) {
this.activeBg = i;
let message = "changeBackground?" + item.name;
- window.parent.postMessage(
- {
- msg: message,
- },
- "*"
- );
+ window.parent.postMessage({ msg: message }, "*");
+ updateUser({
+ id: this.curUser.id,
+ backgroundpic: item.url,
+ }).then((res) => {
+ if (res.success) {
+ sessionStorage.setItem("userInfo", JSON.stringify(res.data));
+ debugger;
+ this.$message.success(res.msg);
+ }
+ });
+ this.$forceUpdate();
},
togglePlay(item, i) {
if (this.curPlayingIndex !== null) {
@@ -405,11 +462,11 @@
uploadSound(param).then(
(res) => {
this.$message.success("涓婁紶鎴愬姛");
- this.showUpload = false
+ this.showUpload = false;
this.getSounds();
},
(err) => {
- this.$message.error("澹伴煶涓婁紶澶辫触");
+ this.$message.error(err.msg);
}
);
},
@@ -418,12 +475,37 @@
},
selectIcons(i) {
this.activeIcons = i;
+ updateUser({
+ id: this.curUser.id,
+ iconType: i + 1,
+ }).then((res) => {
+ if (res.success) {
+ window.parent.postMessage({ msg: "AppUpdate" }, "*");
+ sessionStorage.setItem("userInfo", JSON.stringify(res.data));
+ debugger;
+ this.$message.success(res.msg);
+ }
+ });
},
removeSound(item) {
- this.$confirm("鎮ㄦ槸鍚︾‘璁ゅ垹闄や簨浠跺０闊�", "鍒犻櫎浜嬩欢澹伴煶", {
+ const h = this.$createElement;
+ const icon = this.$msgbox({
+ title: "",
+ message: h(
+ "div",
+ {
+ style:
+ "display: flex; flex-direction: column; justify-content: center; align-items: center;",
+ },
+ [
+ h("span", { class: "icon iconfont warn-icon" }, `${this.warnSpn}`),
+ h("span", { class: "warn-title" }, "鍒犻櫎浜嬩欢澹伴煶 "),
+ h("span", { class: "warn-dec" }, "鎮ㄦ槸鍚︾‘璁ゅ垹闄や簨浠跺０闊�?"),
+ ]
+ ),
+ showCancelButton: true,
confirmButtonText: "纭畾",
cancelButtonText: "鍙栨秷",
- type: "warning",
}).then(() => {
deleteSound({
id: item.id,
@@ -446,10 +528,9 @@
},
clickSound(item, i) {
this.$refs["soundBar"].forEach((x) => {
- x.style.backgroundColor = "rgba(248, 248, 248, 1)";
+ x.style = "border: 2px solid #FFF;";
});
- this.$refs["soundBar"][i].style.backgroundColor =
- "rgba(233, 233, 233, 1)";
+ this.$refs["soundBar"][i].style = "border: 2px solid #4E94FF;";
},
submitAlarm() {
saveAlarmConfig({
@@ -465,55 +546,68 @@
}
});
},
+ colorCard(color, index) {
+ this.universalColor = index;
+ document.documentElement.style.setProperty("--colorCard", `${color}`);
+ localStorage.setItem("--colorCard", `${color}`);
+ window.parent.postMessage({ msg: "changeColor", color }, "*");
+ },
},
};
</script>
-<style lang="scss">
+
+<style scoped lang="scss">
.all {
width: 100%;
}
-.general-set {
+.general-seting {
height: 100%;
display: flex;
flex-direction: row;
flex: 1;
flex-basis: auto;
box-sizing: border-box;
+ .el-input__inner {
+ height: 24px !important;
+ }
.general-center {
height: 100%;
- width: 280px;
+ width: 300px;
overflow: auto;
box-sizing: border-box;
flex-shrink: 0;
- padding: 10px;
- border-right: 5px solid #f8f8f8;
-
+ padding: 10px 10px;
+ padding-top: 6px;
+ border-right: 4px solid #f2f2f7;
+ border-top: 4px solid #f2f2f7;
+ border-left: 4px solid #f2f2f7;
+ background-color: #fbfaff;
.menu-item {
- background-color: #f8f8f8;
- height: 50px;
- margin-bottom: 10px;
- border-radius: 10px;
- line-height: 50px;
+ height: 56px;
+ margin-bottom: 4px;
+ border-radius: 8px;
+ line-height: 56px;
box-sizing: border-box;
- font-size: 14px;
- padding: 0 20px;
+ font-size: 16px;
+ padding-left: 15px;
cursor: pointer;
display: flex;
.iconfont {
- margin-right: 8px;
+ margin: 0 17px;
+ font-size: 24px !important;
}
.title {
- font-size: 15px;
+ font-size: 16px;
+ font-weight: 700;
}
}
.menu-item-active {
- background-color: #3d68e1;
- color: white;
+ background-color: var(--colorCard) !important;
+ color: white !important;
}
.menu-item:hover {
- background-color: #3d68e1;
- color: white;
+ background-color: #f2f2f7;
}
}
.general-right {
@@ -521,8 +615,10 @@
flex-basis: auto;
overflow: auto;
box-sizing: border-box;
+ background-color: rgb(251, 250, 255);
+ border-top: 4px solid #f2f2f7;
- padding: 20px 40px;
+ padding: 6px 18px 10px 10px;
.el-form-item.is-required:not(.is-no-asterisk)
> .el-form-item__label:before,
.el-form-item.is-required:not(.is-no-asterisk)
@@ -536,7 +632,7 @@
.el-form-item {
margin-bottom: 10px;
height: 50px;
- background: #f8f8f8;
+ background: #f2f2f7;
padding: 4px 20px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
@@ -564,58 +660,61 @@
text-align: left;
margin-bottom: 5px;
}
+ .bar.title.voice-title {
+ justify-content: center !important;
+ text-align: center;
+ font-weight: 700;
+ border: none;
+ background: #f2f2f7;
+ border-radius: 8px;
+ height: 48px;
+ margin-bottom: 4px;
+ border: 2px solid #f2f2f7 !important;
+ }
.bar-group {
overflow: auto;
- height: 100%;
- }
- .bar {
- height: 44px;
- background-color: #f8f8f8;
- border-radius: 10px;
- line-height: 44px;
- box-sizing: border-box;
- padding: 0 30px 0 20px;
- display: flex;
- justify-content: space-between;
- margin-bottom: 10px;
- .left-part {
- .icon {
- color: rgba(191, 191, 191, 1);
- font-size: 16px;
- margin-right: 5px;
- }
- }
- .name {
- font-size: 15px;
- }
- .btns {
- width: 50px;
+ height: calc(100% - 100px);
+ .general-bar {
+ height: 48px;
+ background: #f2f2f7;
+ border-radius: 10px;
+ line-height: 48px;
+ box-sizing: border-box;
+ padding: 0 20px 0 20px;
+ font-weight: 700;
display: flex;
justify-content: space-between;
- color: rgba(191, 191, 191, 1);
- .el-icon-video-pause {
- cursor: pointer;
- font-size: 23px;
- vertical-align: middle;
- color: #409eff;
+ margin-bottom: 2px;
+ border: 2px solid #f2f2f7;
+ margin-bottom: 4px;
+ .name {
+ font-size: 14px;
}
- .el-icon-video-play {
- cursor: pointer;
- font-size: 23px;
- vertical-align: middle;
- color: #409eff;
+ .sound-btns {
+ width: 52px;
+ display: flex;
+ justify-content: space-between;
+ color: rgba(191, 191, 191, 1);
+
+ span {
+ color: #333;
+ }
+ .del:hover {
+ color: #fc4958;
+ }
+ }
+ .desc {
+ font-size: 14px;
+ color: rgba(134, 134, 134, 1);
}
}
- .desc {
- font-size: 14px;
- color: rgba(134, 134, 134, 1);
- }
}
- .bar:hover {
- background-color: rgba(233, 233, 233, 1);
- }
+
+ /* .bar:hover {
+ border: 2px solid #4E94FF !important;
+ } */
.add-group {
- margin: 10px auto;
+ margin: 54px auto;
width: fit-content;
}
.upload-demo {
@@ -623,7 +722,6 @@
transition: all 0.5s;
position: absolute;
bottom: -40px;
-
left: calc(50% - 145px);
.el-upload-dragger {
width: 290px;
@@ -636,31 +734,32 @@
cursor: pointer;
width: fit-content;
.icon {
- font-size: 32px;
- color: rgba(61, 104, 225, 1);
+ font-size: 40px;
+ color: var(--colorCard);
}
}
.min-dur {
box-sizing: border-box;
padding: 0 20px;
- background-color: rgba(248, 248, 248, 1);
+ background-color: #f2f2f7;
height: 105px;
- margin-bottom: 20px;
+ margin-bottom: 4px;
border-radius: 15px;
.title {
+ color: #333;
height: 45px;
line-height: 45px;
-
text-align: left;
box-sizing: border-box;
padding: 0 6px;
- font-size: 14px;
+ font-size: 16px;
+ font-weight: 700;
}
}
- .min-dur:hover {
+ /* .min-dur:hover {
background-color: rgba(233, 233, 233, 1);
- }
+ } */
.entity {
display: flex;
@@ -670,13 +769,13 @@
.sec {
min-width: 30px;
line-height: 80px;
- margin-right: 10px;
- color: rgba(120, 120, 120, 1);
- font-size: 14px;
+
+ color: #333;
+ font-size: 8px;
}
.block {
flex: 1;
- margin: 0 20px 0 6px;
+ margin: 0 0px 0 6px;
}
.el-input-number--small {
width: 100px;
@@ -710,34 +809,67 @@
}
}
.save-btn {
- background-color: #3d68e1;
- width: 240px;
+ background-color: var(--colorCard);
+ width: 180px;
height: 40px;
margin: 0 auto;
- border-radius: 10px;
+ border-radius: 25px;
color: #fff;
line-height: 40px;
cursor: pointer;
- font-size: 14px;
- margin-top: 20px;
+ font-size: 16px;
+ font-weight: 700;
+ margin-top: 55px;
}
.self-setting {
.top-title {
+ text-align: left;
font-size: 16px;
- height: 30px;
- line-height: 30px;
margin-bottom: 10px;
+ font-weight: 700;
+ margin-top: 20px;
}
- .icon-bar:hover {
+ /* .icon-bar:hover {
background-color: rgba(233, 233, 233, 1);
+ } */
+ .color-bar {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 412px;
+ height: 96px;
+ background-color: #fff;
+ border-radius: 8px;
+ padding-left: 7px;
+ .color-option {
+ margin-right: 12px;
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ }
+
+ .color-option-active {
+ box-sizing: border-box;
+ margin-right: 12px;
+ width: 30px;
+ height: 30px;
+ border-radius: 50%;
+ background-color: #fff;
+ padding: 4px;
+ .color-option-content {
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ }
+ }
}
.icon-bar {
cursor: pointer;
- background-color: rgba(248, 248, 248, 1);
box-sizing: border-box;
- padding: 15px 25px;
- border-radius: 12px;
- margin-bottom: 12px;
+ padding: 15px 13px 14px 20px;
+ background: #f2f2f7;
+ border-radius: 8px;
+ margin-bottom: 10px;
.bar-title {
line-height: 20px;
height: 20px;
@@ -746,10 +878,20 @@
justify-content: space-between;
.title {
font-size: 14px;
+ font-weight: 700;
+ }
+ .icon-active {
+ font-size: 16px;
+ color: var(--colorCard);
+ }
+ .icon-normal {
+ font-size: 16px;
+ color: #e0e0e0;
}
}
.entity {
display: flex;
+ margin-left: 5px;
.entity-img {
background-color: rgba(248, 248, 248, 1);
width: 50px;
@@ -763,7 +905,7 @@
}
}
.bg-bar {
- background-color: rgba(248, 248, 248, 1);
+ background-color: #f2f2f7;
box-sizing: border-box;
padding: 15px 25px;
border-radius: 12px;
@@ -774,22 +916,222 @@
margin-right: 12px;
cursor: pointer;
// width: 120px;
- height: 80px;
+ height: 66px;
border: 2px solid transparent;
img {
- border-radius: 5px;
- height: 100%;
+ border-radius: 5px;
+ height: 100%;
}
}
- .bg-img:hover {
+ /* .bg-img:hover {
border: 2px solid yellow;
- }
+ } */
.bg-list-active {
- border: 2px solid yellow;
+ border: 2px solid var(--colorCard);
+ border-radius: 8px;
}
}
}
}
}
}
+.v-modal {
+ opacity: 0.35 !important;
+ border-radius: 8px !important;
+}
+
+.el-message-box {
+ position: absolute;
+ width: 420px;
+ height: 210px;
+ left: 302px;
+ top: 279px;
+
+ background: #ffffff;
+ border-radius: 8px;
+}
+
+.upload-demo {
+ width: 452px;
+ height: 150px;
+ background: #ffffff;
+ box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
+ border-radius: 8px;
+
+ ::v-deep .el-upload-dragger {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ overflow: visible;
+ width: 340px;
+ height: 72px;
+ margin-top: 30px;
+ }
+
+ .info-click {
+ color: var(--colorCard);
+ text-decoration: underline;
+ }
+
+ .info-click {
+ color: #4e94ff;
+ text-decoration: underline;
+ }
+}
+
+.des {
+ position: absolute;
+ top: 78px;
+ left: 109px;
+ z-index: 999;
+ color: #4f4f4f;
+ font-weight: bold;
+ font-size: 12px;
+}
</style>
+
+<style lang="scss">
+.el-message-box {
+ padding-bottom: 20px !important;
+ border-radius: 8px !important;
+ .el-message-box__content {
+ color: #333333;
+ padding: 0;
+ font-size: 14px;
+ }
+ .warn-icon {
+ color: var(--colorCard);
+ font-size: 40px;
+ margin-top: 11px;
+ }
+ .warn-title {
+ font-weight: bold;
+ font-size: 16px;
+ margin: 6px;
+ line-height: 22px;
+ }
+ .warn-dec {
+ font-weight: bold;
+ font-size: 14px;
+ color: #828282;
+ line-height: 20px;
+ }
+ .el-message-box__headerbtn {
+ top: 12px;
+ }
+ .el-message-box__headerbtn .el-message-box__close {
+ color: #333333;
+ font-weight: bold;
+ }
+ .el-message-box__btns {
+ display: flex;
+ justify-content: center;
+ margin: 20px;
+ .el-button:focus,
+ .el-button:hover {
+ background-color: none;
+ border: none;
+ }
+ button {
+ width: 175px;
+ height: 40px;
+ border-radius: 25px;
+ span {
+ font-size: 16px;
+ font-weight: 700;
+ }
+ &:hover {
+ border: 1px solid var(--colorCard) !important;
+ }
+ }
+ button:first-child {
+ background-color: #e0e0e0;
+ span {
+ color: #333333;
+ }
+ }
+ button:last-child {
+ background-color: var(--colorCard) !important;
+ border: 1px solid var(--colorCard) !important;
+ span {
+ color: #fff;
+ }
+ }
+ }
+}
+</style>
+
+<style>
+.videoTime .el-slider__button {
+ margin-top: -25px !important;
+ border: none !important;
+}
+
+.videoTime .el-slider__button::after {
+ display: block;
+ position: relative;
+ content: "\e75d";
+ color: var(--colorCard);
+ font-family: "iconfont" !important;
+ font-size: 16px;
+ font-style: normal;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+.videoTime .el-tooltip {
+ background-color: #f2f2f7 !important;
+ border: none !important;
+}
+
+.videoTime .el-slider__runway {
+ background-color: #fff !important;
+ height: 3px !important;
+}
+
+.videoTime .el-slider__stop {
+ background-color: #c4c4c4 !important;
+ height: 3px !important;
+ width: 8px !important;
+ border-radius: 0 !important;
+}
+
+.videoTime .el-slider__bar {
+ z-index: 999999999 !important;
+ background-color: var(--colorCard) !important;
+}
+
+.videoTime .el-input-number.el-input-number--small {
+ width: 90px;
+ height: 24px !important;
+ border-radius: 4px;
+ line-height: 24px !important;
+ font-weight: 700 !important;
+}
+
+.videoTime .el-input-number.el-input-number--small .el-input__inner {
+ font-size: 12px !important;
+ height: 24px !important;
+}
+
+.el-input-number__decrease {
+ color: #333 !important;
+ /* top: 4px !important; */
+ height: 22px !important;
+ width: 20px !important;
+ line-height: 22px !important;
+}
+
+.el-input-number__increase {
+ color: #333 !important;
+ /* top: 4px !important; */
+ height: 22px !important;
+ width: 24px !important;
+ line-height: 22px !important;
+}
+
+.el-input-number__increase:hover i {
+ /* color: var(--colorCard); */
+ color: #4e94ff;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.8.0