<template>
|
<div class="s-basic-setting">
|
<el-tabs
|
id="e-basic-setting"
|
v-model="activeName"
|
v-loading="loading"
|
:element-loading-text="loadingText"
|
type="border-card"
|
>
|
<!-- 本机信息 -->
|
<el-tab-pane label="本机信息" name="first">
|
<el-menu
|
:default-openeds="openeds"
|
background-color="#fff"
|
text-color="#303133"
|
active-text-color="#409EFF"
|
style="height: 100%;"
|
class="menu-css"
|
@open="menuOpen"
|
@close="menuClose"
|
>
|
<!-- 本机信息 -->
|
<el-submenu index="0">
|
<template slot="title">
|
<b class="tree-font">本机信息</b>
|
</template>
|
<el-menu-item-group class="item-group">
|
<el-form :model="sysinfo" :rules="rules" ref="sysinfo" label-width="100px">
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="名称" prop="server_name">
|
<el-input v-model="sysinfo.server_name" placeholder="服务器名称" size="small"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="端口" prop="server_port">
|
<el-input v-model="sysinfo.server_port" placeholder="WEB服务端口" size="small"></el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="IP" prop="ip">
|
<ip-input :ip="sysinfo.ip" @on-blur="sysinfo.ip = arguments[0]"></ip-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="子网掩码" prop="subMask">
|
<ip-input :ip="sysinfo.subMask" @on-blur="sysinfo.subMask = arguments[0]"></ip-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
|
<el-row>
|
<el-col :span="12">
|
<el-form-item label="网关" prop="gateway">
|
<ip-input :ip="sysinfo.gateway" @on-blur="sysinfo.gateway = arguments[0]"></ip-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="DNS" prop="dns">
|
<ip-input :ip="sysinfo.dns" @on-blur="sysinfo.dns = arguments[0]"></ip-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<div class="mt15 mb10 save-btn">
|
<el-button type="primary" @click="submitSysinfo" size="small">保存</el-button>
|
</div>
|
</el-form>
|
</el-menu-item-group>
|
</el-submenu>
|
|
<!-- 详细信息 -->
|
<el-submenu index="1">
|
<template slot="title">
|
<b class="tree-font">详细信息</b>
|
</template>
|
<el-menu-item-group class="item-group desc-info">
|
<el-row :gutter="gutter">
|
<el-col :span="12" class="flex-box">
|
<div class="xiangqin-label">ID</div>
|
<div class="xiangqing-info">{{sysinfo.server_id}}</div>
|
</el-col>
|
<el-col :span="12" class="flex-box">
|
<div class="xiangqin-label">设备编号</div>
|
<div class="xiangqing-info">{{sysinfo.deviceNum}}</div>
|
</el-col>
|
<el-col :span="12" class="flex-box">
|
<div class="xiangqin-label">设备型号</div>
|
<div class="xiangqing-info">{{sysinfo.deviceType}}</div>
|
</el-col>
|
<el-col :span="12" class="flex-box">
|
<div class="xiangqin-label">设备序列号</div>
|
<div class="xiangqing-info">{{sysinfo.deviceSerialNum}}</div>
|
</el-col>
|
<el-col :span="12" class="flex-box">
|
<div class="xiangqin-label">主控版本</div>
|
<div class="xiangqing-info">{{sysinfo.masterVersion}}</div>
|
</el-col>
|
<el-col :span="12" class="flex-box">
|
<div class="xiangqin-label">web版本</div>
|
<div class="xiangqing-info">{{sysinfo.webVersion}}</div>
|
</el-col>
|
<el-col :span="12" class="flex-box">
|
<div class="xiangqin-label">通道个数</div>
|
<div class="xiangqing-info">{{sysinfo.channelCount}}</div>
|
</el-col>
|
<el-col :span="12" class="flex-box">
|
<div class="xiangqin-label">硬盘个数</div>
|
<div class="xiangqing-info">{{sysinfo.diskCount}}</div>
|
</el-col>
|
</el-row>
|
</el-menu-item-group>
|
</el-submenu>
|
<!-- 事件录像时长 -->
|
<el-submenu index="2">
|
<template slot="title">
|
<b class="tree-font">事件录像时长</b>
|
</template>
|
<el-menu-item-group class="item-group">
|
<el-form
|
label-width="150px"
|
class="alarmSetting"
|
style="padding-left:5px;padding-right:5px;"
|
>
|
<el-form-item label="视频截取最短时长" style="width:724px;">
|
<el-slider
|
id="cut_min_duration"
|
v-model="alarmConf.min_video_len"
|
:show-tooltip="false"
|
></el-slider>
|
<el-input-number
|
v-model="alarmConf.min_video_len"
|
controls-position="right"
|
:min="0"
|
:max="100"
|
size="small"
|
></el-input-number> s
|
</el-form-item>
|
<el-form-item label="视频截取最长时长" style="width:724px">
|
<el-slider
|
id="cut_max_duration"
|
v-model="alarmConf.max_video_len"
|
:show-tooltip="false"
|
></el-slider>
|
<el-input-number
|
v-model="alarmConf.max_video_len"
|
controls-position="right"
|
:min="0"
|
:max="100"
|
size="small"
|
></el-input-number> s
|
</el-form-item>
|
<div class="mt15 mb10 save-btn">
|
<el-button type="primary" @click="submitAlarm" size="small">保存</el-button>
|
</div>
|
</el-form>
|
</el-menu-item-group>
|
</el-submenu>
|
<!-- 对外服务IP 改名为外部网络(新tab)-->
|
|
</el-menu>
|
</el-tab-pane>
|
|
<!-- 时间配置 -->
|
<el-tab-pane label="时间配置" name="second">
|
<el-form label-width="100px">
|
<el-form-item label="设备时间">
|
<!-- <el-input v-model="equipmentTime" placeholder="请输入" size="small"></el-input> -->
|
{{ equipmentTime }}
|
</el-form-item>
|
|
<el-form-item label="时区" prop="timezone">
|
<el-select
|
v-model="timezone"
|
placeholder="请选择"
|
style="width: 360px; height: 32px"
|
size="small"
|
>
|
<el-option
|
v-for="item in timeZoneOption"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
></el-option>
|
</el-select>
|
</el-form-item>
|
<div style="text-align: left;padding: 10px 0px">
|
<div class="time-type">NTP校时</div>
|
<div style="padding: 10px 0px;">
|
<el-radio v-model="syncType" label="1">NTP校时</el-radio>
|
</div>
|
</div>
|
|
<el-form-item label="服务器地址">
|
<ip-input
|
:ip="ntpServer"
|
@on-blur="ntpServer= arguments[0]"
|
:disabled="syncType === '2'"
|
></ip-input>
|
</el-form-item>
|
|
<el-form-item label="校时时间间隔" style="width: 41.3%;">
|
<el-input-number
|
v-model.number="timeInterval"
|
:min="1"
|
:max="60"
|
placeholder="请输入"
|
size="small"
|
:controls="false"
|
:disabled="syncType === '2'"
|
></el-input-number> 分钟
|
<el-button
|
type="text"
|
style="position: absolute; left: 330px;"
|
:disabled="syncType === '2'"
|
@click="testNTP"
|
>测试</el-button>
|
</el-form-item>
|
|
<div style="text-align: left;padding: 10px 0px">
|
<div class="time-type">手动校时</div>
|
<div style="padding: 10px 0px;">
|
<el-radio v-model="syncType" label="2">手动校时</el-radio>
|
</div>
|
</div>
|
|
<el-form-item label="设置时间">
|
<el-date-picker
|
v-model="settime"
|
type="datetime"
|
placeholder="选择日期时间"
|
size="small"
|
value-format="yyyy-MM-dd HH:mm:ss"
|
:readonly="settimeRadio"
|
:disabled="syncType === '1'"
|
></el-date-picker>
|
<el-checkbox
|
v-model="settimeRadio"
|
style="margin-left: 12px;"
|
@change="syncBrowser"
|
:disabled="syncType === '1'"
|
>同步本计算机时间</el-checkbox>
|
</el-form-item>
|
|
<el-col :span="12" style="padding-right: 40px;">
|
<el-form-item>
|
<el-button type="primary" @click="submitClock" size="small">保存</el-button>
|
</el-form-item>
|
</el-col>
|
</el-form>
|
</el-tab-pane>
|
|
<!-- 集群管理 -->
|
<el-tab-pane label="集群管理" name="third">
|
<cluster-management></cluster-management>
|
</el-tab-pane>
|
<el-tab-pane label="外部访问" name="fourth">
|
<el-menu
|
:default-openeds="openeds"
|
background-color="#fff"
|
text-color="#303133"
|
active-text-color="#409EFF"
|
style="height: 100%;"
|
class="menu-css"
|
@open="menuOpen"
|
@close="menuClose"
|
>
|
<el-submenu index="0">
|
<template slot="title">
|
<b class="tree-font">外部访问设置</b>
|
</template>
|
<el-menu-item-group class="item-group">
|
<el-form :model="sysinfo" :rules="rules" ref="sysinfo" label-width="100px">
|
<div class="flex-box">
|
<label>设置外部IP</label>
|
<div style="width:300px;">
|
<ip-input :ip="ipServer.ip" @on-blur="ipServer.ip = arguments[0]"></ip-input>
|
</div>
|
<el-checkbox label="选用本机IP" size="small" style="margin-left: 20px"></el-checkbox>
|
</div>
|
<div class="flex-box">
|
<label>域名</label>
|
<el-input size="small" v-model="ipServer.localhost"></el-input>
|
</div>
|
<div class="flex-box">
|
<label>本地文件端口</label>
|
<el-input size="small" v-model="ipServer.localFilePort"></el-input>
|
</div>
|
<div class="mt15 mb10 save-btn">
|
<el-button type="primary" @click="submitSysinfo" size="small">保存</el-button>
|
</div>
|
</el-form>
|
</el-menu-item-group>
|
</el-submenu>
|
|
</el-menu>
|
</el-tab-pane>
|
<el-tab-pane label="权限管理" name="user">
|
<authority-management v-if="activeName === 'user'"></authority-management>
|
</el-tab-pane>
|
<el-tab-pane label="广播设置" name="radio">
|
<radio-set v-if="activeName === 'radio'"></radio-set>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</template>
|
|
<script>
|
import {
|
getDevInfo,
|
getAlarmConfig,
|
saveDevInfo,
|
saveAlarmConfig,
|
getClockInfo,
|
saveClockInfo,
|
testNTPserver,
|
getResourceConfig,
|
saveResourceConfig,
|
} from "@/api/system";
|
|
import { isPort, isIPv4 } from "@/scripts/validate";
|
import ipInput from "@/components/subComponents/IPInput";
|
import TimeZones from "@/Pool/TimeZones"
|
|
import ClusterManagement from "./ClusterManagement";
|
import AuthorityManagement from "./AuthorityManagement";
|
import RadioSet from "./RadioSet";
|
|
export default {
|
name: "BasicSettings",
|
components: {
|
ipInput,
|
ClusterManagement,
|
AuthorityManagement,
|
RadioSet
|
},
|
computed: {
|
timeZoneOption() {
|
let options = []
|
TimeZones.forEach(zone => {
|
options = options.concat(zone.utc.map(v => {
|
return { value: v, label: v }
|
}))
|
})
|
return options
|
}
|
},
|
directives: {
|
focus: {
|
inserted: function (el) {
|
el.querySelector('input').focus()
|
}
|
}
|
},
|
data() {
|
return {
|
loading: true,
|
loadingText: "",
|
gutter: 10,
|
activeName: "first",
|
timezone: "",
|
syncType: "1",
|
ntpServer: "",
|
equipmentTime: "",
|
NYPport: "",
|
settime: "",
|
timeInterval: 10,
|
settimeRadio: false,
|
clockTimer: null,
|
browserTimer: null,
|
timestamp: 0,
|
sysinfo: {},
|
alarmConf: {},
|
originNetConfig: {
|
ip: "",
|
gw: "",
|
mask: "",
|
dns: ""
|
},
|
rules: {
|
ip: [
|
{
|
required: true,
|
message: "请输入IP地址",
|
trigger: "change"
|
},
|
{ validator: isIPv4, trigger: "change" }
|
],
|
ServerIp: [
|
{
|
required: true,
|
message: "请输入IP地址",
|
trigger: "change"
|
},
|
{ validator: isIPv4, trigger: "change" }
|
],
|
ServerPort: [
|
{
|
required: true,
|
message: "请输入端口",
|
trigger: "change"
|
},
|
{ validator: isPort, trigger: "change" }
|
],
|
GbServerPort: [
|
{
|
required: true,
|
message: "请输入端口",
|
trigger: "change"
|
},
|
{ validator: isPort, trigger: "change" }
|
],
|
gateway: [
|
{
|
required: true,
|
message: "请输入网关",
|
trigger: "change"
|
},
|
{ validator: isIPv4, trigger: "change" }
|
],
|
dns: [
|
{
|
required: true,
|
message: "请输入dns地址",
|
trigger: "change"
|
},
|
{ validator: isIPv4, trigger: "change" }
|
],
|
server_name: [
|
{ required: true, message: "请输入名称", trigger: "change" }
|
],
|
subMask: [
|
{
|
required: true,
|
message: "请输入子网掩码",
|
trigger: "change"
|
},
|
{ validator: isIPv4, trigger: "change" }
|
]
|
},
|
openeds: ["0"],
|
ipServer: {
|
diyOrLocalIP: "1",
|
ip: "",
|
localhost: "",
|
localFilePort: "",
|
},
|
locationCity: {
|
province: '',
|
city: '',
|
county: '',
|
provinceOptions: [],
|
cityOptions: [],
|
countyOptions: []
|
},
|
};
|
webPort: 0;
|
},
|
mounted() {
|
this.$nextTick(() => {
|
this.initSysinfo();
|
// this.initAlarmConf();
|
this.initResourceConfig();
|
this.initClockConf();
|
});
|
},
|
beforeDestroy() {
|
clearTimeout(this.clockTimer);
|
clearInterval(this.browserTimer);
|
},
|
methods: {
|
initSysinfo() {
|
this.loadingText = "正在获取设备信息...";
|
getDevInfo().then(rsp => {
|
if (rsp && rsp.success) {
|
this.sysinfo = rsp.data;
|
this.sysinfo.gateway = this.sysinfo.gateway.trim();
|
this.originNetConfig.ip = this.sysinfo.ip;
|
this.originNetConfig.mask = this.sysinfo.subMask;
|
this.originNetConfig.gw = this.sysinfo.gateway.trim();
|
this.originNetConfig.dns = this.sysinfo.dns ? this.sysinfo.dns : "";
|
this.alarmConf.min_video_len = rsp.data.min_video_len;
|
this.alarmConf.max_video_len = rsp.data.max_video_len;
|
|
if (!this.sysinfo.server_port) {
|
this.sysinfo.server_port = 7003;
|
}
|
|
this.webPort = this.sysinfo.server_port;
|
}
|
|
this.loading = false;
|
}).catch(err => {
|
this.loading = false;
|
});
|
},
|
initClockConf() {
|
getClockInfo().then(rsp => {
|
if (rsp && rsp.success) {
|
this.timezone = rsp.data.time_zone;
|
this.syncType = rsp.data.ntp ? "1" : "2";
|
if (rsp.data.ntp) {
|
this.ntpServer = rsp.data.ntp_server;
|
this.timeInterval = rsp.data.interval;
|
}
|
this.timestamp = rsp.data.local_time
|
if (this.clockTimer === null) {
|
this.runClock();
|
}
|
}
|
})
|
},
|
runClock() {
|
this.equipmentTime = this.formatTime(++this.timestamp, 'Y-M-D h:m:s');
|
// console.log(this.equipmentTime)
|
this.clockTimer = setTimeout(() => {
|
this.runClock();
|
}, 1000)
|
},
|
initAlarmConf() {
|
// getAlarmConfig().then(rsp => {
|
// if (rsp && rsp.success) {
|
// this.alarmConf = rsp.data;
|
// }
|
// });
|
},
|
initResourceConfig() {
|
getResourceConfig().then(rsp => {
|
if (rsp && rsp.success) {
|
this.ipServer.diyOrLocalIP = rsp.data.ipType
|
this.ipServer.ip = rsp.data.serviceIp
|
this.ipServer.localhost = rsp.data.domain
|
this.ipServer.localFilePort = rsp.data.filePort
|
}
|
})
|
},
|
syncBrowser(enable) {
|
if (!enable) {
|
clearInterval(this.browserTimer)
|
} else {
|
this.browserTimer = setInterval(() => {
|
let timestamp = new Date().getTime() / 1000;
|
this.settime = this.formatTime(timestamp, 'Y-M-D h:m:s')
|
}, 1000)
|
}
|
},
|
submitSysinfo() {
|
this.$refs["sysinfo"].validate(valid => {
|
if (valid) {
|
if (this.sysinfo.ip !== this.originNetConfig.ip
|
|| this.sysinfo.subMask !== this.originNetConfig.mask
|
|| this.sysinfo.dns !== this.originNetConfig.dns
|
|| this.sysinfo.gateway !== this.originNetConfig.gw) {
|
|
if (this.sysinfo.ip !== this.originNetConfig.ip) {
|
let newUri = location.protocol + "//" + this.sysinfo.ip + ":" + this.sysinfo.server_port;
|
var changeIPTimer = setTimeout(() => {
|
this.$alert('<strong>您已修改了服务器ip, 请重新登录</strong><a href="' + newUri + '"> ' + newUri + '<a/>', '提示', {
|
dangerouslyUseHTMLString: true
|
});
|
}, 10000)
|
}
|
|
this.$confirm("确认需要修改服务器网络配置吗？", {
|
center: true,
|
cancelButtonClass: "comfirm-class-cancle",
|
confirmButtonClass: "comfirm-class-sure"
|
}).then(() => {
|
this.loading = true;
|
this.loadingText = "正在处理..."
|
saveDevInfo(this.sysinfo).then(rsp => {
|
if (rsp && rsp.success) {
|
this.$notify({
|
type: "success",
|
message: "本机信息保存成功"
|
});
|
}
|
this.initSysinfo();
|
this.loading = false;
|
}).catch(err => {
|
this.loading = false;
|
clearTimeout(changeIPTimer)
|
this.$notify({
|
type: "error",
|
message: "保存失败"
|
});
|
});
|
}).catch(err => {
|
});
|
} else {
|
saveDevInfo(this.sysinfo).then(rsp => {
|
if (rsp && rsp.success) {
|
this.$notify({
|
type: "success",
|
message: "本机信息保存成功"
|
});
|
this.initSysinfo();
|
}
|
});
|
|
if (this.sysinfo.server_port !== this.webPort) {
|
let newUri = location.protocol + "//" + this.sysinfo.ip + ":" + this.sysinfo.server_port;
|
var changeIPTimer = setTimeout(() => {
|
this.$alert('<strong>您已修改了服务器端口, 请重新登录</strong><a href="' + newUri + '"> ' + newUri + '<a/>', '提示', {
|
dangerouslyUseHTMLString: true
|
});
|
}, 5000)
|
}
|
}
|
} else {
|
console.log("error submit!!");
|
return false;
|
}
|
});
|
},
|
submitClock() {
|
if (this.syncType === '1') {
|
if (this.ntpServer === "") {
|
this.$notify({
|
type: "error",
|
message: "NTP 服务器地址不能为空"
|
});
|
return false
|
} else if (this.timeInterval === "") {
|
this.timeInterval = 1;
|
}
|
} else {
|
if (this.settime === "") {
|
this.$notify({
|
type: "error",
|
message: "设置时间不能为空"
|
});
|
return false
|
}
|
}
|
let requestBody = {
|
timeZone: this.timezone,
|
ntp: this.syncType === '1',
|
ntpServer: this.ntpServer,
|
interval: this.timeInterval,
|
newTime: this.settime
|
}
|
saveClockInfo(requestBody).then(rsp => {
|
if (rsp && rsp.success) {
|
this.$notify({
|
type: "success",
|
message: "设置成功"
|
});
|
}
|
})
|
},
|
testNTP() {
|
testNTPserver({ server: this.ntpServer }).then(rsp => {
|
if (rsp && rsp.success) {
|
this.$notify({
|
type: "success",
|
message: "时间同步成功"
|
});
|
} else {
|
this.$notify({
|
type: "error",
|
message: "时间同步失败"
|
});
|
}
|
}).catch(err => {
|
this.$notify({
|
type: "error",
|
message: "时间同步失败,请检查服务器ip"
|
});
|
})
|
},
|
submitAlarm() {
|
saveAlarmConfig(this.alarmConf).then(rsp => {
|
if (rsp && rsp.success) {
|
this.$notify({
|
type: "success",
|
message: "保存成功"
|
});
|
}
|
});
|
},
|
submitResource() {
|
let regNum = /^[0-9]*$/;
|
if (!this.vaildHost(this.ipServer.localhost)) {
|
this.$notify({
|
type: "warning",
|
message: "请输入正确格式得域名！"
|
})
|
return false;
|
}
|
if (!regNum.test(this.ipServer.localFilePort)) {
|
this.$notify({
|
type: 'warning',
|
message: "请输入正确的端口号！"
|
})
|
return false;
|
}
|
saveResourceConfig({
|
domain: this.ipServer.localhost,
|
ipType: this.ipServer.diyOrLocalIP,
|
serviceIp: this.ipServer.ip,
|
filePort: Number(this.ipServer.localFilePort)
|
}).then(res => {
|
if (res && res.success) {
|
this.$notify({
|
type: "success",
|
message: "保存成功"
|
});
|
} else {
|
this.$notify({
|
type: "error",
|
message: "保存失败"
|
});
|
}
|
})
|
},
|
onIpBlur(e, ip) {
|
console.log(e, ip);
|
},
|
formatTime(number, format) {
|
var formateArr = ['Y', 'M', 'D', 'h', 'm', 's'];
|
var returnArr = [];
|
|
var date = new Date(number * 1000);
|
returnArr.push(date.getFullYear());
|
returnArr.push(this.formatNumber(date.getMonth() + 1));
|
returnArr.push(this.formatNumber(date.getDate()));
|
|
returnArr.push(this.formatNumber(date.getHours()));
|
returnArr.push(this.formatNumber(date.getMinutes()));
|
returnArr.push(this.formatNumber(date.getSeconds()));
|
|
for (var i in returnArr) {
|
format = format.replace(formateArr[i], returnArr[i]);
|
}
|
return format;
|
},
|
|
//数据转化
|
formatNumber(n) {
|
n = n.toString()
|
return n[1] ? n : '0' + n
|
},
|
menuOpen(event) {
|
|
},
|
menuClose(event) {
|
|
},
|
handleEdit(row) {
|
console.log(row);
|
row.edit = true;
|
},
|
handleCancel(row) {
|
row.edit = false;
|
console.log(row);
|
},
|
handleSave(row) {
|
console.log(row);
|
row.edit = false;
|
this.$notify({
|
message: "保存成功",
|
type: "success"
|
});
|
},
|
//校验域名
|
vaildHost(str) {
|
let re = /^(?=^.{3,255}$)(http(s)?:\/\/)?(www\.)?[a-zA-Z0-9][-a-zA-Z0-9]{0,62}(\.[a-zA-Z0-9][-a-zA-Z0-9]{0,62})+(:\d+)*(\/\w+\.\w+)*$/
|
return re.test(str)
|
},
|
}
|
};
|
</script>
|
<style lang="scss">
|
.s-basic-setting {
|
width: 100%;
|
height: 100%;
|
.el-form {
|
width: 1000px;
|
|
// margin-left: -80px;
|
.el-form-item {
|
text-align: left;
|
&.is-required:not(.is-no-asterisk)>.el-form-item__label:before{
|
margin-left:-8px;
|
}
|
.el-button {
|
float: right;
|
}
|
|
.el-form-item__content {
|
text-align: left;
|
input {
|
max-width: 360px;
|
}
|
.el-date-editor.el-input,
|
.el-date-editor.el-input__inner {
|
width: 216px;
|
}
|
.el-checkbox__label {
|
padding-left: 5px;
|
}
|
}
|
|
.el-form-item__label {
|
text-align: left;
|
}
|
}
|
}
|
.alarmSetting {
|
.el-input {
|
width: 100%;
|
// padding-right: 10px;
|
}
|
.el-select {
|
max-width: 113px;
|
}
|
.el-slider {
|
width: calc(100% - 120px);
|
display: inline-block;
|
padding-right: 30px;
|
box-sizing: border-box;
|
vertical-align: middle;
|
}
|
.el-input-number {
|
width: 100px;
|
display: inline-block;
|
.el-input {
|
width: 100%;
|
}
|
}
|
}
|
|
.time-type {
|
height: 25px;
|
width: 413px;
|
line-height: 28px;
|
padding: 3px 23px;
|
font-size: 14px;
|
font-weight: 600;
|
background-color: #e4e6ed;
|
}
|
|
#cut_min_duration {
|
.el-slider__bar {
|
background-color: #3d68e1;
|
}
|
.el-slider__button {
|
width: 10px;
|
height: 10px;
|
border: 4px solid #3d68e1;
|
}
|
}
|
|
#cut_max_duration {
|
.el-slider__bar {
|
background-color: #ff9e6e;
|
}
|
.el-slider__button {
|
width: 10px;
|
height: 10px;
|
border: 4px solid #ff9e6e;
|
}
|
}
|
.menu-css,
|
.el-menu {
|
border-right: none;
|
list-style: none;
|
position: relative;
|
margin: 0;
|
padding-left: 10px;
|
background-color: #ffffff;
|
.el-submenu__title {
|
height: 35px;
|
line-height: 35px;
|
font-size: 14px;
|
color: #303133;
|
padding: 0 20px;
|
list-style: none;
|
cursor: pointer;
|
position: relative;
|
-webkit-transition: border-color 0.3s, background-color 0.3s, color 0.3s;
|
transition: border-color 0.3s, background-color 0.3s, color 0.3s;
|
-webkit-box-sizing: border-box;
|
box-sizing: border-box;
|
white-space: nowrap;
|
}
|
.tree-font {
|
font-family: PingFangSC-Medium;
|
font-size: 14px;
|
color: #222222;
|
text-align: left;
|
}
|
li {
|
text-align: left;
|
.el-submenu__title {
|
// border-bottom: solid 1px #e6e6e6;
|
padding-left: 10px !important;
|
background-color: #e4e6ed !important;
|
border-radius: 2px;
|
.el-submenu__icon-arrow {
|
position: absolute;
|
top: 50%;
|
right: auto;
|
left: 135px;
|
margin-top: -7px;
|
-webkit-transition: -webkit-transform 0.3s;
|
transition: -webkit-transform 0.3s;
|
transition: transform 0.3s;
|
transition: transform 0.3s, -webkit-transform 0.3s;
|
font-size: 12px;
|
}
|
}
|
}
|
}
|
.save-btn {
|
text-align: right;
|
position: relative;
|
right: 40px;
|
}
|
}
|
</style>
|
<style lang="scss" scoped>
|
.flex-box {
|
display: flex;
|
height: 50px;
|
label {
|
width: 120px;
|
}
|
.el-input {
|
width: 300px;
|
}
|
}
|
.desc-info{
|
margin-bottom: 14px;
|
.flex-box{
|
height: 40px;
|
line-height: 40px;
|
.xiangqin-label{
|
width: 80px;
|
}
|
}
|
}
|
.menu-css,
|
.el-menu {
|
border-right: none;
|
list-style: none;
|
position: relative;
|
margin: 0;
|
padding-left: 0;
|
background-color: #ffffff;
|
|
.tree-font {
|
font-family: PingFangSC-Medium;
|
font-size: 14px;
|
color: #222222;
|
text-align: left;
|
}
|
li {
|
text-align: left;
|
.el-submenu__title {
|
.el-submenu__icon-arrow {
|
position: absolute;
|
top: 50%;
|
right: 0;
|
margin-top: -7px;
|
-webkit-transition: -webkit-transform 0.3s;
|
transition: -webkit-transform 0.3s;
|
transition: transform 0.3s;
|
transition: transform 0.3s, -webkit-transform 0.3s;
|
font-size: 12px;
|
}
|
}
|
}
|
}
|
</style>
|
