From 5455dd4cd7c27d14bc7f98f110ae14163dbaacc1 Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期三, 16 二月 2022 15:30:10 +0800
Subject: [PATCH] 对比库新增跳到最末
---
src/pages/library/components/addBase.vue | 664 +++++++++++++++++++++++++++++++++++++------------------
1 files changed, 448 insertions(+), 216 deletions(-)
diff --git a/src/pages/library/components/addBase.vue b/src/pages/library/components/addBase.vue
index 3b67b73..ff18fa7 100644
--- a/src/pages/library/components/addBase.vue
+++ b/src/pages/library/components/addBase.vue
@@ -1,27 +1,41 @@
<template>
- <div>
+ <div class="add-base-c">
+ <div class="header">
+ <span>搴曞簱淇℃伅</span>
+ <i class="iconfont iconcha" @click="onCancle"></i>
+ </div>
<el-form
ref="baseForm"
:model="form"
:rules="rules"
label-width="150px"
- class="mt50"
+ class="add-base-form"
label-position="left"
>
<el-row>
<el-col :span="10" :offset="1">
- <el-form-item label="鍚嶇О" label-width="80px" style="width:100%" required prop="tableName">
- <el-input size="small" v-model="form.tableName" placeholder="璇疯緭鍏�"></el-input>
+ <el-form-item
+ label="鍚嶇О"
+ label-width="80px"
+ style="width: 100%"
+ required
+ prop="tableName"
+ >
+ <el-input
+ size="small"
+ v-model="form.tableName"
+ placeholder="璇疯緭鍏�"
+ ></el-input>
</el-form-item>
</el-col>
<el-col :span="9" :offset="1">
- <el-form-item label="瀵规帴鏁版嵁搴�" label-width="100px" :span="11">
+ <el-form-item label="瀵规帴鏁版嵁搴�" label-width="90px" :span="11">
<el-select
size="small"
v-model="form.cameraBrand"
disabled
placeholder="璇烽�夋嫨瀵规帴鏁版嵁搴�"
- style="width:100%"
+ style="width: 100%"
>
<el-option label="浜哄憳搴�" value="person"></el-option>
<el-option label="鍦ㄩ�冨簱" value="zaitao"></el-option>
@@ -31,16 +45,53 @@
</el-col>
</el-row>
<el-row>
- <el-col :span="10" :offset="1">
- <el-form-item label="绫诲瀷" label-width="80px" style="width:100%" required prop="tableType">
- <el-select size="small" v-model="form.tableType" placeholder="璇烽�夋嫨" style="width:100%">
- <el-option label="浜哄憳搴�" value="person"></el-option>
- <el-option label="杞﹁締" value="car"></el-option>
- </el-select>
+ <el-col :span="10" :offset="1" class="start-time-pick">
+ <el-form-item
+ label="鏈夋晥鏃堕棿"
+ label-width="80px"
+ style="width: 100%"
+ required
+ prop="startTime"
+ >
+ <el-col :span="11" class>
+ <el-date-picker
+ size="small"
+ popper-class="popper-add"
+ type="datetime"
+ placeholder="閫夋嫨鏃ユ湡"
+ value-format="yyyy-MM-dd HH:mm:ss"
+ v-model="form.startTime"
+ :picker-options="pickerOptions"
+ style="width: 100%"
+ ></el-date-picker>
+ </el-col>
+ <el-col :span="2" class="text-center pick-time">
+ <span>-</span>
+ </el-col>
+ <el-col :span="11">
+ <el-date-picker
+ size="small"
+ class="end-time-pick"
+ popper-class="popper-add"
+ type="datetime"
+ :placeholder="foreverChecked ? '姘镐箙鏈夋晥' : '閫夋嫨鏃ユ湡'"
+ :disabled="foreverChecked"
+ value-format="yyyy-MM-dd HH:mm:ss"
+ v-model="form.endTime"
+ :picker-options="pickerOptions"
+ style="width: 100%; text-align: center"
+ ></el-date-picker>
+ </el-col>
+ <el-checkbox
+ v-model="foreverChecked"
+ @change="forever"
+ class="check-css"
+ >姘镐箙鏈夋晥</el-checkbox
+ >
</el-form-item>
</el-col>
<el-col :span="9" :offset="1">
- <el-form-item label="搴撳湴鍧�" label-width="100px" :span="11">
+ <el-form-item label="搴撳湴鍧�" label-width="90px" :span="11">
<el-input size="small" disabled placeholder="璇疯緭鍏�"></el-input>
</el-form-item>
</el-col>
@@ -50,342 +101,518 @@
<el-form-item
label="榛戠櫧鍚嶅崟"
label-width="80px"
- style="width:100%;text-align:left"
+ style="width: 100%; text-align: left"
required
prop="bwType"
>
- <el-radio-group v-model="form.bwType" class>
+ <el-radio-group
+ v-model="form.bwType"
+ fill="#4e94ff"
+ text-color="#4e94ff"
+ >
<el-radio :label="`1`">榛戝悕鍗�</el-radio>
<el-radio :label="`0`">鐧藉悕鍗�</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
<el-col :span="9" :offset="1">
- <el-form-item label="鐢ㄦ埛鍚�" label-width="100px" :span="11">
- <el-input size="small" v-model="form.userName" disabled placeholder="榛樿鍊�"></el-input>
+ <el-form-item label="鐢ㄦ埛鍚�" label-width="90px" :span="11">
+ <el-input
+ size="small"
+ v-model="form.userName"
+ disabled
+ placeholder="榛樿鍊�"
+ ></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="10" :offset="1" class="flex-box">
<el-form-item
- label="鏈夋晥鏃堕棿"
+ label="绫诲瀷"
label-width="80px"
- style="width:100%"
+ style="width: 100%"
required
- prop="startTime"
+ prop="tableType"
>
- <el-col :span="11" class="pick-time">
- <el-date-picker
- size="small"
- type="datetime"
- placeholder="閫夋嫨鏃ユ湡"
- value-format="yyyy-MM-dd HH:mm:ss"
- v-model="form.startTime"
- :picker-options="pickerOptions"
- style="width: 100%;"
- ></el-date-picker>
- <el-checkbox v-model="foreverChecked" @change="forever" class="check-css">姘镐箙鏈夋晥</el-checkbox>
- <!-- <el-radio v-model="foreverChecked" label="1">澶囬�夐」</el-radio> -->
- </el-col>
- <el-col :span="2" class="text-center pick-time">
- <span>鍒�</span>
- </el-col>
- <el-col :span="11">
- <el-date-picker
- size="small"
- type="datetime"
- placeholder="閫夋嫨鏃ユ湡"
- :disabled="foreverChecked"
- value-format="yyyy-MM-dd HH:mm:ss"
- v-model="form.endTime"
- :picker-options="pickerOptions"
- style="width: 100%;"
- ></el-date-picker>
- </el-col>
+ <el-select
+ size="small"
+ v-model="form.tableType"
+ :popper-append-to-body="false"
+ placeholder="璇烽�夋嫨"
+ style="width: 100%"
+ >
+ <el-option label="浜哄憳搴�" value="person"></el-option>
+ <el-option label="杞﹁締" value="car"></el-option>
+ </el-select>
</el-form-item>
</el-col>
<el-col :span="9" :offset="1">
- <el-form-item label="瀵嗙爜" label-width="100px" :span="11">
- <el-input size="small" v-model="form.pwd" disabled placeholder="榛樿鍊�"></el-input>
+ <el-form-item label="瀵嗙爜" label-width="90px" :span="11">
+ <el-input
+ size="small"
+ v-model="form.pwd"
+ disabled
+ placeholder="榛樿鍊�"
+ ></el-input>
<input v-model="form.id" type="hidden" />
</el-form-item>
</el-col>
</el-row>
- <!-- <el-row>
- <el-col :span="7" :offset="1">
- <el-form-item label="鏄惁鍚屾" label-width="80px" style="width:100%;text-align:left" required>
- <el-radio-group v-model="form.isSync" class>
- <el-radio label="1">鏄�</el-radio>
- <el-radio label="0">鍚�</el-radio>
- </el-radio-group>
- </el-form-item>
- </el-col>
- </el-row> -->
- <el-row>
- <el-col :span="6" :offset="15">
- <el-form-item style="margin-top:50px;text-align:right;" label-width="0px">
- <el-button type="info" size="small" @click="onCancle">鍙栨秷</el-button>
- <el-button type="primary" size="small" @click="onSubmit('baseForm')" class="save">淇濆瓨</el-button>
- </el-form-item>
- </el-col>
+ <el-row class="footer">
+ <el-button
+ type="info"
+ size="small"
+ @click="onCancle"
+ style="color: #222"
+ >鍙栨秷</el-button
+ >
+ <el-button
+ type="primary"
+ size="small"
+ @click="onSubmit('baseForm')"
+ class="save"
+ >淇濆瓨</el-button
+ >
</el-row>
</el-form>
</div>
</template>
<script>
-import { addBase, updateBase } from '@/api/baseLibrary'
+import { addBase, updateBase } from "@/api/baseLibrary";
export default {
- name: 'addBase',
+ name: "addBase",
data() {
const validatePass = (rule, value, callback) => {
- if (this.form.startTime && this.form.startTime !== '') {
+ if (this.form.startTime && this.form.startTime !== "") {
if (this.dateCompare(this.form.startTime, value) !== 1) {
- callback(new Error('缁撴潫鏃堕棿涓嶈兘澶т簬寮�濮嬫椂闂达紒'))
+ callback(new Error("缁撴潫鏃堕棿涓嶈兘澶т簬寮�濮嬫椂闂达紒"));
} else {
- callback()
+ callback();
}
}
- }
+ };
return {
foreverChecked: false,
form: {
- analyServerId: '',
- tableName: '',
+ analyServerId: "",
+ tableName: "",
startTime: new Date(),
- tableType: '',
- isForever: '0',
- id: '',
- endTime: '',
- bwType: '1',
+ tableType: "",
+ isForever: "0",
+ id: "",
+ endTime: "",
+ bwType: "1",
enable: 0, // 1鐢熸晥锛�0鏈敓鏁�
- isSync: '1', // 1涓哄悓姝ワ紝0涓烘湰鍦�
- tableDesc: '' // 搴曞簱鎻忚堪
+ isSync: "1", // 1涓哄悓姝ワ紝0涓烘湰鍦�
+ tableDesc: "", // 搴曞簱鎻忚堪
},
pickerOptions: {
disabledDate(time) {
- return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
- }
+ return time.getTime() < Date.now() - 24 * 60 * 60 * 1000;
+ },
},
rules: {
- tableName: [
- { required: true, message: '搴曞簱鍚嶇О涓嶈兘涓虹┖' }
- ],
- tableType: [
- { required: true, message: '搴曞簱绫诲瀷涓嶈兘涓虹┖' }
- ],
- bwType: [
- { required: true, message: '榛戠櫧鍚嶅崟蹇呴��' }
- ],
+ tableName: [{ required: true, message: "搴曞簱鍚嶇О涓嶈兘涓虹┖"}],
+ tableType: [{ required: true, message: "搴曞簱绫诲瀷涓嶈兘涓虹┖" }],
+ bwType: [{ required: true, message: "榛戠櫧鍚嶅崟蹇呴��"}],
startTime: [
- { required: !this.foreverChecked, message: '璇烽�夋嫨璧峰鏃堕棿' }
+ { required: !this.foreverChecked, message: "璇烽�夋嫨璧峰鏃堕棿" },
],
- endTime: [
- { validator: validatePass, trigger: 'change' }
- ]
- }
- }
+ endTime: [{ validator: validatePass, trigger: "change" }],
+ },
+ };
},
mounted() {
- this.init()
+ this.init();
},
watch: {
baseObject: function (newVal, oldVal) {
- this.foreverChecked = false
- this.form = newVal
- console.log(this.form,'baseObject')
- if (!newVal.endTime || newVal.endTime === undefined || newVal.endTime === null) {
- this.form.isForever = '1'
- this.foreverChecked = true
+ this.foreverChecked = false;
+ this.form = newVal;
+ if (
+ !newVal.endTime ||
+ newVal.endTime === undefined ||
+ newVal.endTime === null
+ ) {
+ this.form.isForever = "1";
+ this.foreverChecked = true;
} else {
- this.form.isForever = '0'
- this.foreverChecked = false
+ this.form.isForever = "0";
+ this.foreverChecked = false;
}
},
- 'form.endTime': function (newVal, oldVal) {
+ "form.endTime": function (newVal, oldVal) {
if (!newVal || newVal === null || newVal === undefined) {
- this.form.isForever = '1'
- this.foreverChecked = true
+ this.form.isForever = "1";
+ this.foreverChecked = true;
} else {
- this.form.isForever = '0'
- this.foreverChecked = false
- if (this.form.startTime && this.form.startTime !== '') {
- // console.log(this.form.startTime, newVal)
-
- if (this.dateCompare(this.$moment(this.form.startTime).format('YYYY-MM-DD'), this.$moment(newVal).format('YYYY-MM-DD')) !== 1) {
+ this.form.isForever = "0";
+ this.foreverChecked = false;
+ if (this.form.startTime && this.form.startTime !== "") {
+ if (
+ this.dateCompare(
+ this.$moment(this.form.startTime).format("YYYY-MM-DD"),
+ this.$moment(newVal).format("YYYY-MM-DD")
+ ) !== 1
+ ) {
this.$toast({
- type: 'warning',
- message: '缁撴潫鏃堕棿涓嶈兘灏忎簬寮�濮嬫椂闂达紒'
- })
- this.form.endTime = ''
+ type: "warning",
+ message: "缁撴潫鏃堕棿涓嶈兘灏忎簬寮�濮嬫椂闂达紒",
+ });
+ this.form.endTime = "";
}
}
}
},
- 'form.startTime': function (newVal, oldVal) {
+ "form.startTime": function (newVal, oldVal) {
if (newVal) {
- if (this.form.endTime && this.form.endTime !== '') {
- if (this.dateCompare(this.$moment(this.form.endTime).format('YYYY-MM-DD'), this.$moment(newVal).format('YYYY-MM-DD')) === 1) {
+ if (this.form.endTime && this.form.endTime !== "") {
+ if (
+ this.dateCompare(
+ this.$moment(this.form.endTime).format("YYYY-MM-DD"),
+ this.$moment(newVal).format("YYYY-MM-DD")
+ ) === 1
+ ) {
this.$toast({
- type: 'warning',
- message: '缁撴潫鏃堕棿涓嶈兘灏忎簬寮�濮嬫椂闂达紒'
- })
- this.form.endTime = ''
+ type: "warning",
+ message: "缁撴潫鏃堕棿涓嶈兘灏忎簬寮�濮嬫椂闂达紒",
+ });
+ this.form.endTime = "";
}
}
}
- }
+ },
},
methods: {
onSubmit(formName) {
- console.log(this.form.id, 'submit')
if (this.form.id) {
// id涓嶄负绌猴紝淇敼搴曞簱
this.$refs[formName].validate(async (valid) => {
if (valid) {
- // const { ...json } = this.form
let res = await updateBase({
analyServerId: this.form.analyServerId,
tableName: this.form.tableName,
- startTime: this.$moment(this.form.startTime).format('YYYY-MM-DD HH:mm:ss'),
+ startTime: this.$moment(this.form.startTime).format(
+ "YYYY-MM-DD HH:mm:ss"
+ ),
tableType: this.form.tableType,
- isForever: this.foreverChecked ? '1':'0',
+ isForever: this.foreverChecked ? "1" : "0",
id: this.form.id,
- endTime: this.form.endTime ? this.$moment(this.form.endTime).format('YYYY-MM-DD HH:mm:ss') : '',
+ endTime: this.form.endTime
+ ? this.$moment(this.form.endTime).format("YYYY-MM-DD HH:mm:ss")
+ : "",
bwType: this.form.bwType,
enable: this.form.enable,
tableDesc: this.form.tableDesc,
- // isSync: this.form.isSync,
- })
+ });
if (res.success === true) {
this.$notify({
title: "鎴愬姛",
message: "搴曞簱淇℃伅淇濆瓨鎴愬姛锛�",
- type: "success"
+ type: "success",
});
- this.$emit('refresh')
+ this.$emit("refresh");
+ this.$emit("closeAdd");
} else {
this.$notify({
title: "澶辫触",
message: "搴曞簱淇℃伅淇濆瓨澶辫触锛�",
- type: "error"
+ type: "error",
});
}
}
- })
+ });
} else {
// id涓虹┖锛屾柊澧炲簳搴�
this.$refs[formName].validate(async (valid) => {
if (valid) {
- // const { ...json } = this.form
- // console.log('鏂板鍙傛暟', json)
addBase({
tableName: this.form.tableName,
- startTime: this.$moment(this.form.startTime).format('YYYY-MM-DD 00:00:00'),
+ startTime: this.$moment(this.form.startTime).format(
+ "YYYY-MM-DD 00:00:00"
+ ),
tableType: this.form.tableType,
- isForever: this.foreverChecked ? '1':'0',
+ isForever: this.foreverChecked ? "1" : "0",
id: this.form.id,
- endTime: this.form.endTime ? this.$moment(this.form.endTime).format('YYYY-MM-DD 23:59:59') : '',
+ endTime: this.form.endTime
+ ? this.$moment(this.form.endTime).format("YYYY-MM-DD 23:59:59")
+ : "",
bwType: this.form.bwType,
enabled: this.form.enabled,
tableDesc: this.form.tableDesc,
analyServerId: this.type,
- // isSync: this.form.isSync,
- }).then((res) => {
- this.$notify({
- title: "鎴愬姛",
- message: "搴曞簱淇℃伅淇濆瓨鎴愬姛锛�",
- type: "success"
- });
- this.$emit('refresh')
- }).catch((err) => {
- this.$notify({
- title: "澶辫触",
- message: err.data,
- type: "error"
- });
})
+ .then((res) => {
+ this.$notify({
+ title: "鎴愬姛",
+ message: "搴曞簱淇℃伅淇濆瓨鎴愬姛锛�",
+ type: "success",
+ });
+ this.$emit("refresh");
+ this.$emit("closeAdd");
+ })
+ .catch((err) => {
+ this.$notify({
+ title: "澶辫触",
+ message: err.data,
+ type: "error",
+ });
+ });
}
- })
+ });
}
},
- onCancle(){
- this.$emit('closeAdd')
+ onCancle() {
+ this.$emit("closeAdd");
},
forever(value) {
if (value) {
- this.form.endTime = ''
+ this.form.endTime = "";
}
},
init() {
- console.log('娣诲姞搴曞簱琛ㄥ崟鏀跺埌鐨勬暟鎹�', this.baseObject, this.type)
- if(Object.keys(this.baseObject).length > 3){
- this.form = this.baseObject
- if (!this.form.endTime) {
- this.foreverChecked = true
- } else {
- this.foreverChecked = false
- }
- }else{
- this.$refs.baseForm.resetFields()
+ if (Object.keys(this.baseObject).length > 3) {
+ this.form = this.baseObject;
+ this.foreverChecked = !this.form.endTime
+ } else {
+ this.$refs.baseForm.resetFields();
}
},
dateParse(dateString) {
- var SEPARATOR_BAR = '-'
- var SEPARATOR_SLASH = '/'
- var SEPARATOR_DOT = '.'
- var dateArray
+ var SEPARATOR_BAR = "-";
+ var SEPARATOR_SLASH = "/";
+ var SEPARATOR_DOT = ".";
+ var dateArray;
if (dateString.indexOf(SEPARATOR_BAR) > -1) {
- dateArray = dateString.split(SEPARATOR_BAR)
+ dateArray = dateString.split(SEPARATOR_BAR);
} else if (dateString.indexOf(SEPARATOR_SLASH) > -1) {
- dateArray = dateString.split(SEPARATOR_SLASH)
+ dateArray = dateString.split(SEPARATOR_SLASH);
} else {
- dateArray = dateString.split(SEPARATOR_DOT)
+ dateArray = dateString.split(SEPARATOR_DOT);
}
- return new Date(dateArray[0], dateArray[1] - 1, dateArray[2])
+ return new Date(dateArray[0], dateArray[1] - 1, dateArray[2]);
},
isEmpty(str) {
- if (!str || str === undefined || str === null) {
- return true
- } else {
- return false
- }
+ return !str || str === undefined || str === null
},
dateCompare(dateString, compareDateString) {
// dateString:褰撳墠鏃堕棿
// compareDateString:闇�瑕佹瘮杈冪殑鏃堕棿
if (this.isEmpty(dateString)) {
- // alert('dateString涓嶈兘涓虹┖')
- return
+ return;
}
if (this.isEmpty(compareDateString)) {
- // alert('compareDateString涓嶈兘涓虹┖')
- return 1
+ return 1;
}
- var dateTime = this.dateParse(dateString).getTime()
- var compareDateTime = this.dateParse(compareDateString).getTime()
+ var dateTime = this.dateParse(dateString).getTime();
+ var compareDateTime = this.dateParse(compareDateString).getTime();
if (compareDateTime > dateTime) {
- return 1
+ return 1;
} else if (compareDateTime === dateTime) {
- return 0
+ return 0;
} else {
- return -1
+ return -1;
}
- }
+ },
},
props: {
baseObject: {
- default: () => { },
- type: Object
+ default: () => {},
+ type: Object,
},
type: {
- default: 'sync',
- type: String
+ default: "sync",
+ type: String,
+ },
+ },
+};
+</script>
+<style lang="scss">
+.el-date-picker.el-popper.popper-add {
+ border-radius: 8px;
+ .el-input--small .el-input__inner {
+ border: 1px solid #d4d5d8;
+ border-radius: 16px;
+ }
+ .el-date-range-picker__time-header {
+ border-bottom: none;
+ }
+ .el-picker-panel__footer {
+ border-top: none;
+ text-align: center;
+ padding-bottom: 10px;
+ border-radius: inherit;
+ }
+ .el-date-range-picker .el-picker-panel__content {
+ margin: 0;
+ padding: 5px 15px;
+ }
+ .el-date-picker__time-header {
+ border-bottom: none;
+ }
+ .el-date-picker__header {
+ margin-bottom: 0;
+ }
+ .el-picker-panel__content {
+ margin-top: 0;
+ }
+ .el-button--text {
+ color: #999999;
+ background: #fff;
+ padding: 9px 37px;
+ font-size: 14px;
+ border: 1px solid #999999;
+ border-radius: 18px;
+ }
+ .el-date-table td.start-date span,
+ .el-date-table td.end-date span {
+ background-color: var(--colorCard);
+ }
+ .el-date-table td.in-range div {
+ background-color: var(--colorCard) 17;
+ }
+ .el-button--default {
+ background: var(--colorCard);
+ padding: 9px 37px;
+ color: #fff;
+ border: 1px solidvar(--colorCard);
+ border-radius: 18px;
+ font-size: 14px;
+ }
+}
+.add-base-c {
+ background: #ffffff;
+ border-radius: 24px;
+ height: 100%;
+ .header {
+ height: 52px;
+ box-shadow: 0px 2px 4px rgb(0 0 0 / 8%);
+ text-align: center;
+ line-height: 52px;
+ position: relative;
+ background: #fff;
+ border-radius: 24px 24px 0 0;
+ span {
+ font-size: 14px;
+ line-height: 20px;
+ color: #5f5f5f;
+ }
+ i {
+ color: #999999;
+ position: absolute;
+ right: 20px;
+ cursor: pointer;
+ font-size: 14px;
+ }
+ }
+ .add-base-form {
+ padding: 30px 20px;
+
+ .el-form-item__label {
+ color: #999999;
+ }
+ .footer {
+ margin-top: 40px;
+ .el-button--info {
+ color: #999999;
+ background: #fff;
+ padding: 9px 37px;
+ font-size: 14px;
+ border: 1px solid #999999;
+ border-radius: 18px;
+ width: 150px;
+ }
+ .el-button--primary {
+ background: var(--colorCard) !important;
+ padding: 9px 37px;
+ color: #fff;
+ border: 1px solid var(--colorCard) !important;
+ border-radius: 18px;
+ font-size: 14px;
+ width: 150px;
+ }
+ }
+ .el-radio__input.is-checked .el-radio__inner {
+ border-color: var(--colorCard);
+ background: var(--colorCard);
+ }
+ .el-radio__input.is-checked + .el-radio__label {
+ color: var(--colorCard);
+ }
+ .el-select .el-input.is-focus .el-input__inner {
+ border-color: var(--colorCard);
+ }
+ .end-time-pick.is-disabled .el-input__inner {
+ background-color: #fff;
+ cursor: not-allowed;
+ }
+ .el-form-item__content {
+ line-height: 32px;
+ }
+ .el-form-item__label {
+ line-height: 32px;
+ }
+ .el-form-item {
+ margin-bottom: 0;
+ height: 65px;
+ }
+ .end-time-pick.is-disabled .el-input__inner::placeholder {
+ color: #606266;
+ }
+ .el-select-dropdown__item.selected {
+ color: var(--colorCard);
+ }
+ .el-select-dropdown__item {
+ border-radius: 8px;
+ }
+ .el-select-dropdown__item.selected.hover {
+ color: #fff;
+ }
+ .el-select-dropdown__item:hover,
+ .el-select-dropdown__item.selected:hover {
+ background-color: var(--colorCard);
+ color: #fff;
+ }
+ .el-select-dropdown {
+ border-radius: 8px;
+ box-shadow: 0px 0px 8px rgb(0 0 0 / 16%);
+ left: 0px !important;
+ }
+ .el-popper[x-placement^="bottom"] .popper__arrow {
+ top: -7px;
+ }
+ .el-select-dropdown__list {
+ padding: 0;
+ }
+ .el-input--small .el-input__inner {
+ height: 32px;
+ line-height: 32px;
+ border: 1px solid #d3d5d8;
+ border-radius: 16px;
+ }
+ .el-col-9 {
+ width: 46%;
+ margin-left: 5%;
+ }
+ .el-col-10 {
+ width: 46%;
+ margin-left: 2%;
+ }
+ .el-form-item__error {
+ color: #fe6d68;
+ padding-top: 5px;
+ left: 15px;
+ }
+ .start-time-pick {
+ .el-form-item__error {
+ top: 34px;
+ left: 105px;
+ }
}
}
}
-</script>
-<style lang="scss">
+
.el-radio__inner {
border: 1px solid #dcdfe6;
border-radius: 100%;
@@ -396,23 +623,25 @@
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
-.el-radio__input.is-checked .el-radio__inner {
- border-color: #3d68e1;
- background: #3d68e1;
-}
.save {
- background: #3d68e1;
+ background: var(--colorCard);
border-radius: 2px;
outline: none;
}
.check-css {
position: relative;
- left: -42px;
+ height: 20px;
+ left: -187px;
+ top: -4px;
+ line-height: 20px;
+ .el-checkbox__input.is-checked + .el-checkbox__label {
+ color: var(--colorCard);
+ }
.el-checkbox__inner {
display: inline-block;
position: relative;
border: 1px solid #dcdfe6;
- border-radius: 10px;
+ // border-radius: 10px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 14px;
@@ -426,8 +655,8 @@
}
.el-checkbox__input.is-checked .el-checkbox__inner,
.el-checkbox__input.is-indeterminate .el-checkbox__inner {
- background-color: #3d68e1;
- border-color: #3d68e1;
+ background-color: var(--colorCard);
+ border-color: var(--colorCard);
}
}
@@ -447,15 +676,15 @@
line-height: 40px;
outline: none;
padding: 0 0 0 15px;
- -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
- transition: border-color .2s cubic-bezier(.645,.045,.355,1);
+ -webkit-transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
+ transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
width: 100%;
}
.el-input--prefix .el-input__inner {
padding-left: 22px;
}
.el-input--suffix .el-input__inner {
- padding-right: 0;
+ padding-right: 0;
}
.el-input__prefix {
position: absolute;
@@ -463,7 +692,7 @@
left: 0px;
top: 0;
text-align: center;
- color: #C0C4CC;
+ color: #c0c4cc;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
@@ -473,10 +702,13 @@
right: -2px;
top: 0;
text-align: center;
- color: #C0C4CC;
+ color: #c0c4cc;
-webkit-transition: all 0.3s;
transition: all 0.3s;
pointer-events: none;
}
+ .el-button--info {
+ color: #222222 !important;
+ }
}
</style>
--
Gitblit v1.8.0