Skip to content

G
gassafety
Commit 7f826775 authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

gis地图样式

parent 18cceaa1
Show whitespace changes
Inline Side-by-side
Showing with 423 additions and 193 deletions
gassafety-web/public/index.html
View file @ 7f826775
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= webpackConfig.name %></title> <title><%= webpackConfig.name %></title>
<!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]--> <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
<script src="https://webapi.amap.com/maps?v=2.0&key=eed7ca3167f765467aa377fa78e61ece&plugin=Map3D,AMap.DistrictSearch,AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.MouseTool,AMap.ControlBar,AMap.CircleEditor,AMap.PolyEditor"></script> <script src="https://webapi.amap.com/maps?v=2.0&key=49fcb156d466062435d7d33437099582&plugin=Map3D,AMap.DistrictSearch,AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.MouseTool,AMap.ControlBar,AMap.CircleEditor,AMap.PolyEditor"></script>
<style> <style>
html, html,
body, body,
......
gassafety-web/src/assets/styles/element-ui.scss
View file @ 7f826775
...@@ -78,19 +78,7 @@ ...@@ -78,19 +78,7 @@
display: inline-flex !important; display: inline-flex !important;
} }
// gis地图里抽屉的搜索样式
.search-input {
.el-input__inner {
height: 28px;
min-height: 28px;
outline: #053b6a;
&:focus {
// outline: #053b6a;
border-color: #053b6a;
}
}
}
// to fix el-date-picker css style // to fix el-date-picker css style
.el-range-separator { .el-range-separator {
box-sizing: content-box; box-sizing: content-box;
......
gassafety-web/src/assets/styles/gassafety.scss
View file @ 7f826775
...@@ -103,61 +103,95 @@ ...@@ -103,61 +103,95 @@
} }
} }
// gis地图中底部table样式 // gis地图中底部table样式
.right-bottom-data-left { .right-bottom-data-left {
.el-table { .el-table {
background-color: rgba(0, 0, 0, 0) !important;
&::before {
height: 0px !important;
}
td {
border-bottom: none !important;
}
.el-table__header-wrapper, .el-table__header-wrapper,
.el-table__fixed-header-wrapper { .el-table__fixed-header-wrapper {
tr {
background-color: #213b5260 !important;
}
th { th {
word-break: break-word; word-break: break-word;
background-color: #fff; background-color: #213b5260 !important;
color: #525252; color: rgba(123, 248, 244, 1);
height: 30px; height: 30px;
font-size: 13px; font-size: 13px;
padding: 0; padding: 0;
&.is-leaf {
border-bottom: none;
}
} }
} }
.el-table__body-wrapper { .el-table__body-wrapper {
.el-table__row:nth-child(2n + 1) { .el-table__row:nth-child(2n + 1) {
background-color: #e6e6e6; // background-color: #e6e6e6;
background-color: #213b5260;
// &:hover { // &:hover {
// td { // td {
// background-color: #f4f4f4; // background-color: #f4f4f4;
// } // }
// } // }
&:hover td {
background-color: #7bf8f430 !important;
}
td { td {
.cell { .cell {
color: #525252; // color: #525252;
color: rgba(123, 248, 244, 1);
} }
} }
} }
.el-table__row:nth-child(2n) { .el-table__row:nth-child(2n) {
background-color: #f4f4f4; // background-color: #213b52;
background-color: #06315760;
// &:hover { // &:hover {
// td { // td {
// background-color: #e6e6e6; // background-color: #e6e6e6;
// } // }
// } // }
&:hover td {
background-color: #7bf8f430 !important;
}
td { td {
.cell { .cell {
color: #053b6a; // color: #053b6a;
color: #fff;
} }
} }
} }
} }
.el-table__body-wrapper { .el-table__body-wrapper {
.el-button [class*="el-icon-"] + span { .el-button [class*="el-icon-"] + span {
margin-left: 1px; // margin-left: 1px;
} }
} }
} }
} }
// gis地图里抽屉的搜索样式
.search-input {
.el-input__inner {
height: 28px;
min-height: 28px;
outline: #053b6a;
background: none !important;
color: #fff;
&:focus {
// outline: #053b6a;
border-color: #fff;
}
}
}
/** 表单布局 **/ /** 表单布局 **/
.form-header { .form-header {
font-size: 15px; font-size: 15px;
...@@ -346,3 +380,10 @@ ...@@ -346,3 +380,10 @@
} }
// background-color: ; // background-color: ;
} }
// gis地图内的bottom列表，如果隐藏在出现会有一个bug，这样可以解决
.el-bottom {
.el-table__body-wrapper {
height: 140px !important;
}
}
gassafety-web/src/assets/styles/gassafety1.scss
View file @ 7f826775
/** /**
* 通用css样式布局处理 * 通用css样式布局处理
* Copyright (c) 2019 gassafety * Copyright (c) 2019 gassafety
*/ */
/** 基础通用 **/ /** 基础通用 **/
.pt5 { .pt5 {
padding-top: 5px; padding-top: 5px;
} }
...@@ -53,12 +53,13 @@ ...@@ -53,12 +53,13 @@
margin-left: 20px; margin-left: 20px;
} }
.el-dialog:not(.is-fullscreen){ .el-dialog:not(.is-fullscreen) {
margin-top: 6vh !important; margin-top: 6vh !important;
} }
.el-table { .el-table {
.el-table__header-wrapper, .el-table__fixed-header-wrapper { .el-table__header-wrapper,
.el-table__fixed-header-wrapper {
th { th {
word-break: break-word; word-break: break-word;
background-color: #f8f8f9; background-color: #f8f8f9;
...@@ -76,11 +77,11 @@ ...@@ -76,11 +77,11 @@
/** 表单布局 **/ /** 表单布局 **/
.form-header { .form-header {
font-size:15px; font-size: 15px;
color:#6379bb; color: #6379bb;
border-bottom:1px solid #ddd; border-bottom: 1px solid #ddd;
margin:8px 10px 25px 10px; margin: 8px 10px 25px 10px;
padding-bottom:5px padding-bottom: 5px;
} }
/** 表格布局 **/ /** 表格布局 **/
...@@ -96,8 +97,8 @@ ...@@ -96,8 +97,8 @@
.tree-border { .tree-border {
margin-top: 5px; margin-top: 5px;
border: 1px solid #e5e6e7; border: 1px solid #e5e6e7;
background: #FFFFFF none; background: #ffffff none;
border-radius:4px; border-radius: 4px;
} }
.pagination-container .el-pagination { .pagination-container .el-pagination {
...@@ -158,22 +159,22 @@ ...@@ -158,22 +159,22 @@
/* button color */ /* button color */
.el-button--cyan.is-active, .el-button--cyan.is-active,
.el-button--cyan:active { .el-button--cyan:active {
background: #20B2AA; background: #20b2aa;
border-color: #20B2AA; border-color: #20b2aa;
color: #FFFFFF; color: #ffffff;
} }
.el-button--cyan:focus, .el-button--cyan:focus,
.el-button--cyan:hover { .el-button--cyan:hover {
background: #48D1CC; background: #48d1cc;
border-color: #48D1CC; border-color: #48d1cc;
color: #FFFFFF; color: #ffffff;
} }
.el-button--cyan { .el-button--cyan {
background-color: #20B2AA; background-color: #20b2aa;
border-color: #20B2AA; border-color: #20b2aa;
color: #FFFFFF; color: #ffffff;
} }
/* text color */ /* text color */
...@@ -227,13 +228,14 @@ ...@@ -227,13 +228,14 @@
} }
/* 拖拽列样式 */ /* 拖拽列样式 */
.sortable-ghost{ .sortable-ghost {
opacity: .8; opacity: 0.8;
color: #fff!important; color: #fff !important;
background: #42b983!important; background: #42b983 !important;
} }
.top-right-btn { .top-right-btn {
position: relative; position: relative;
float: right; float: right;
} }
gassafety-web/src/components/mapDialog/checkPipeLineLocation.vue
View file @ 7f826775
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
<el-button size="small" @click="$emit('dialogcancelFun')">取消</el-button> <el-button size="small" @click="$emit('dialogcancelFun')">取消</el-button>
</el-row> </el-row>
</el-dialog> </el-dialog>
</template> </template>
<script> <script>
......
gassafety-web/src/utils/gaodeMapView.js
View file @ 7f826775
...@@ -69,9 +69,9 @@ class gaodeMap { ...@@ -69,9 +69,9 @@ class gaodeMap {
showLabel: true, showLabel: true,
// labelzIndex: 110, // labelzIndex: 110,
pitch: 8, pitch: 8,
zoom: 9 zoom: 9,
//mapStyle: 'amap://styles/darkblue', //mapStyle: 'amap://styles/darkblue',
// mapStyle: 'amap://styles/3b679a15f448a4740ba2ff7524e1a4ae', mapStyle: 'amap://styles/1c84d2203793b0f622df2cda53db1afd',
}); });
this.myMap = map; this.myMap = map;
this.myMap.on("mousedown", e => { this.myMap.on("mousedown", e => {
...@@ -216,7 +216,7 @@ class gaodeMap { ...@@ -216,7 +216,7 @@ class gaodeMap {
options.scrollWheel = true; options.scrollWheel = true;
map.setStatus(options); map.setStatus(options);
}); });
this.infoWindowMove(infoWindow); // this.infoWindowMove(infoWindow);
let marker = new AMap.Marker({ let marker = new AMap.Marker({
position: [data.longitude, data.latitude], position: [data.longitude, data.latitude],
...@@ -955,7 +955,7 @@ class gaodeMap { ...@@ -955,7 +955,7 @@ class gaodeMap {
boxCollision(infowindowDom) { boxCollision(infowindowDom) {
// gis地图页面的bottomdata组件 // gis地图页面的bottomdata组件
const { const {
RightBototmData: { $el: pageDom } Bottom: { $el: pageDom }
} = this.view.$refs; } = this.view.$refs;
let { let {
offsetTop: ay, offsetTop: ay,
...@@ -1015,22 +1015,26 @@ class gaodeMap { ...@@ -1015,22 +1015,26 @@ class gaodeMap {
} }
// infoWindow的拖拽 // infoWindow的拖拽
infoWindowMove(infoWindow) { infoWindowMove(infoWindow) {
let disX, disY,dom; let disX, disY, dom;
infoWindow.on("mousedown", e => { infoWindow.on("mousedown", e => {
dom = e.target.dom; dom = e.target.dom;
// const a = dom.offsetTop + 20; disX = e.originEvent.clientX - dom.offsetLeft;
// dom.style.top = a + "px"; disY = e.originEvent.clientY - dom.offsetTop;
// console.log(dom.offsetTop); console.log(disX,disY);
// console.log(e.originEvent.clientY); window.addEventListener("mousemove", windowMove);
// console.log(dom.offsetLeft); });
// console.log(e.originEvent.clientX); const windowMove = e => {
disX = dom.offsetTop - e.originEvent.clientX; const mouseX = e.clientX;
disY = dom.offsetLeft - e.originEvent.clientY; const mouseY = e.clientY
window.addEventListener("mousemove",(e)=>{ const domTop = mouseY -disY;
const domLeft = mouseX- disX;
}) // console.log(domTop,domLeft)
dom.style.top = domTop + "px";
dom.style.left = domLeft + "px";
};
infoWindow.on("mouseup", () => {
window.removeEventListener("mousemove", windowMove);
}); });
} }
// 关闭转化到vue的dom // 关闭转化到vue的dom
removeCloneDom() { removeCloneDom() {
......
gassafety-web/src/views/enterprise/mapView/components/RightBototmData.vue → gassafety-web/src/views/enterprise/mapView/components/Bottom.vue
View file @ 7f826775
...@@ -2,14 +2,14 @@ ...@@ -2,14 +2,14 @@
<div class="wrapper"> <div class="wrapper">
<div class="left"> <div class="left">
<div class="top"> <div class="top">
<span>设备报警最新记录</span> <span class="title">设备报警最新记录</span>
<span @click="repeatClick" class="repeat">刷新</span> <span @click="repeatClick" class="repeat">刷新</span>
<transition name="fade"> <transition name="fade">
<span v-show="repeatFinshed" class="repeat2"> 数据刷新成功</span> <span v-show="repeatFinshed" class="repeat2"> 数据刷新成功</span>
</transition> </transition>
<span @click="moreClick" class="more">更多>></span> <span @click="moreClick" class="more">更多</span>
</div> </div>
<div class="bottom right-bottom-data-left"> <div class="bottom right-bottom-data-left">
...@@ -22,11 +22,13 @@ ...@@ -22,11 +22,13 @@
</div> --> </div> -->
<!-- <div class="one">设备编号:<span>1123123123</span></div> <!-- <div class="one">设备编号:<span>1123123123</span></div>
<div class="two">报警时间:<span>34523452345</span></div> --> <div class="two">报警时间:<span>34523452345</span></div> -->
<el-table <el-table
size="mini" size="mini"
:data="tableData" :data="tableData"
style="width: 100%" style="width: 100%"
height="170" :height="tableHeight"
class="el-bottom"
> >
<el-table-column prop="deviceCode" label="设备编号" width="100"> <el-table-column prop="deviceCode" label="设备编号" width="100">
</el-table-column> </el-table-column>
...@@ -56,7 +58,7 @@ ...@@ -56,7 +58,7 @@
</div> </div>
</div> </div>
<div class="right"> <!-- <div class="right">
<template v-for="(item, index) in list"> <template v-for="(item, index) in list">
<div <div
class="right-content" class="right-content"
...@@ -77,7 +79,7 @@ ...@@ -77,7 +79,7 @@
</div> </div>
</div> </div>
</template> </template>
</div> </div> -->
</div> </div>
</template> </template>
...@@ -108,7 +110,7 @@ export default { ...@@ -108,7 +110,7 @@ export default {
4: "icon-ylbgs", 4: "icon-ylbgs",
99: "icon-gdcd", 99: "icon-gdcd",
}, },
tableHeight: 170,
tableData: [ tableData: [
{ {
deviceCode: "2016-05-03", deviceCode: "2016-05-03",
...@@ -226,43 +228,62 @@ export default { ...@@ -226,43 +228,62 @@ export default {
position: fixed; position: fixed;
right: 10px; right: 10px;
bottom: 10px; bottom: 10px;
overflow: hidden;
// background-color: #fff; // background-color: #fff;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
& > div { & > div {
} }
.left { .left {
width: 680px; width: 716px;
height: 198px;
margin-right: 12px; margin-right: 12px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16); box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);
// background-color: #fff; // background-color: #fff;
// color: #fff; // color: #fff;
font-size: 14px; font-size: 14px;
font-weight: 400; font-weight: 400;
background-image: url(../../../../assets/images/bottomBg.png);
.el-table__body-wrappe {
height: 140px !important;
}
.top { .top {
height: 32px; height: 19px;
background-color: #053b6a; // background-color: #053b6a;
color: #fff; color: #fff;
line-height: 32px; // line-height: 32px;
padding-left: 12px; // padding-left: 12px;
// position: relative; position: relative;
span {
display: inline-block; .title{
position: absolute;
left:50%;
margin-left:-92px;
top:-5px;
} }
.repeat { .repeat {
margin-left: 20px; position: absolute;
top:-5px;
right: 160px;
color: #fff;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: #2788ea; color: #2788ea;
} }
} }
.repeat2 { .repeat2 {
margin-left: 20px; position: absolute;
right: 206px;
color: #67c23a; color: #67c23a;
} }
.more { .more {
position: absolute;
right: 38px;
top: -5px;
color: #fff;
float: right; float: right;
margin-right: 20px; margin-right: 20px;
cursor: pointer; cursor: pointer;
...@@ -272,15 +293,8 @@ export default { ...@@ -272,15 +293,8 @@ export default {
} }
} }
.bottom { .bottom {
.table-top { width: 680px;
// background-color: red; margin: 0 auto;
// display: flex;
// justify-content: space-between;
// div {
// width: 100%;
// text-align: center;
// }
}
} }
} }
.right { .right {
......
gassafety-web/src/views/enterprise/mapView/components/Right.vue 0 → 100644
View file @ 7f826775
<template>
<div class="wrapper">
<!-- <img src="/static/img/rightWrapperBg.25536016.png" alt=""> -->
<div class="right">
<template v-for="(item, index) in list">
<div
class="right-content"
:class="{ three: index == 2 }"
:key="item.type"
>
<div class="text-icon">
<i
class="iconfont"
:class="[iconClass(item), { iconFontSize: item.type == 4 }]"
></i>
</div>
<div class="text">
<div class="top">{{ typeName[item.type] }}</div>
<div class="bottom">
{{ item.number }}{{ item.type == 99 ? "M" : "个" }}
</div>
</div>
</div>
</template>
</div>
</div>
</template>
<script>
import { listDeviceAlarm } from "@/api/dataMonitoring/deviceAlarm";
export default {
props: {
list: {
type: Array,
},
},
data() {
return {
timer: null,
repeatFinshed: false,
typeName: {
1: "调压箱",
2: "阀门井",
3: "流量计",
4: "压力表",
99: "管线长度",
},
iconList: {
1: "icon-tyxgs",
2: "icon-fmjgs",
3: "icon-lljgs",
4: "icon-ylbgs",
99: "icon-gdcd",
},
};
},
created() {},
methods: {
iconClass(item) {
return this.iconList[item.type];
},
},
};
</script>
<style lang="scss" scoped>
.wrapper {
width: 300px;
height: 800px;
position: absolute;
top: 80px;
right: 0;
overflow-x: hidden;
// right: 10px;
// top: 131px;
background-image: url(/static/img/rightWrapperBg.25536016.png);
background-position-x: -72px;
background-position-y: center;
background-size: 193% 137%;
background-repeat: no-repeat;
img {
// width: 300px;
// height: 800px;
// position: absolute;
// top:0;
// left:0;
}
& > div {
}
.right {
position: absolute;
right: 10px;
top: 51px;
& > .right-content {
// background-color: #fff;
width: 247px;
height: 104px;
margin-bottom: 29px;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.16);
background-image: url(../../../../assets/images/listBg.png);
margin-right: 10px;
display: flex;
&.three {
margin-right: 0px;
}
// align-items: center;
.text-icon {
line-height: 102px;
padding-left: 28px;
margin-right: 22px;
margin-left: 30px;
i {
color: #7bf8f4;
font-size: 60px;
}
}
.text {
font-size: 14px;
padding-top: 16px;
.top {
color: #fff;
margin-top: 7px;
margin-bottom: 10px;
font-weight: 600;
}
.bottom {
color: #7bf8f4;
}
}
}
}
// 单独调整下最后一个icon的大小
.iconFontSize {
font-size: 50px !important;
}
.fade-enter-to,
.fade-leave {
opacity: 1;
}
.fade-leave-active {
transition: opacity 0.5s;
}
.fade-enter-active {
transition: opacity 0s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
}
</style>
\ No newline at end of file
gassafety-web/src/views/enterprise/mapView/index.vue
View file @ 7f826775
...@@ -65,11 +65,16 @@ ...@@ -65,11 +65,16 @@
</el-collapse-transition> </el-collapse-transition>
</div> </div>
</div> </div>
<Right
<RightBototmData v-show="rightDataShow"
:class="{ classShow: !rightDataShow }"
ref="Right"
:list="rightBototmData"
/>
<Bottom
v-show="bottomDataShow" v-show="bottomDataShow"
:class="{ classShow: !bottomDataShow }" :class="{ classShow: !bottomDataShow }"
ref="RightBototmData" ref="Bottom"
:list="rightBototmData" :list="rightBototmData"
/> />
<!-- 报警工单 --> <!-- 报警工单 -->
...@@ -278,16 +283,18 @@ import gaodeMap, { ...@@ -278,16 +283,18 @@ import gaodeMap, {
import { selectAlarmDevice } from "@/api/dataMonitoring/deviceAlarm.js"; import { selectAlarmDevice } from "@/api/dataMonitoring/deviceAlarm.js";
import { getAllDeviceInfo, countDeviceByType } from "@/api/device/deviceInfo"; import { getAllDeviceInfo, countDeviceByType } from "@/api/device/deviceInfo";
import { getMapHiddenTroublelist } from "@/api/riskManagement/hiddenTrouble"; import { getMapHiddenTroublelist } from "@/api/riskManagement/hiddenTrouble";
import RightBototmData from "./components/RightBototmData.vue"; import Bottom from "./components/Bottom.vue";
import Right from "./components/Right.vue";
import CreateWork from "./components/CreateWork.vue"; import CreateWork from "./components/CreateWork.vue";
import CreateWorkTrouble from "./components/CreateWorkTrouble.vue"; import CreateWorkTrouble from "./components/CreateWorkTrouble.vue";
import { getInspectorLocations } from "@/api/inspectorLocation/location"; import { getInspectorLocations } from "@/api/inspectorLocation/location";
export default { export default {
components: { components: {
RightBototmData, Bottom,
CreateWork, CreateWork,
CreateWorkTrouble, CreateWorkTrouble,
Right,
}, },
data() { data() {
return { return {
...@@ -377,6 +384,7 @@ export default { ...@@ -377,6 +384,7 @@ export default {
// 右下角的数据data // 右下角的数据data
rightBototmData: [], rightBototmData: [],
bottomDataShow: true, bottomDataShow: true,
rightDataShow: true,
// 是否显示生成工单弹框 // 是否显示生成工单弹框
createWorkOpen: false, createWorkOpen: false,
//隐患工单 //隐患工单
...@@ -1603,7 +1611,8 @@ input[type="radio"] { ...@@ -1603,7 +1611,8 @@ input[type="radio"] {
left: 0; left: 0;
width: 348px; width: 348px;
transition: 0.2s linear; transition: 0.2s linear;
background: #fff; // background: #fff;
background: #061d3360;
// background: red; // background: red;
opacity: 0; opacity: 0;
// 优化抽屉出来回去 // 优化抽屉出来回去
...@@ -1627,6 +1636,7 @@ input[type="radio"] { ...@@ -1627,6 +1636,7 @@ input[type="radio"] {
top: 14px; top: 14px;
left: 39px; left: 39px;
width: 236px; width: 236px;
// background-color: red !important;
.icon-search { .icon-search {
line-height: 28px; line-height: 28px;
cursor: pointer; cursor: pointer;
...@@ -1688,9 +1698,11 @@ input[type="radio"] { ...@@ -1688,9 +1698,11 @@ input[type="radio"] {
color: #1d1d1d; color: #1d1d1d;
&:hover { &:hover {
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1px solid #053b6a; border-bottom: 1px solid #7fc0f8;
color: #053b6a;
font-weight: 600; font-weight: 600;
> div {
color: #7fc0f8;
}
} }
&.topActive { &.topActive {
// border-top: 1px solid #cccccc; // border-top: 1px solid #cccccc;
...@@ -1707,6 +1719,7 @@ input[type="radio"] { ...@@ -1707,6 +1719,7 @@ input[type="radio"] {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
color: #fff;
// border-right: 1px solid #cccccc; // border-right: 1px solid #cccccc;
} }
} }
...@@ -1732,6 +1745,11 @@ input[type="radio"] { ...@@ -1732,6 +1745,11 @@ input[type="radio"] {
} }
&:hover { &:hover {
border-bottom: 1px solid red; border-bottom: 1px solid red;
.no,
.name,
.code {
color: red !important;
}
} }
} }
} }
...@@ -1740,7 +1758,7 @@ input[type="radio"] { ...@@ -1740,7 +1758,7 @@ input[type="radio"] {
height: 48px; height: 48px;
padding-left: 20px; padding-left: 20px;
display: flex; display: flex;
background-color: #ffffff; // background-color: #ffffff;
box-sizing: border-box; box-sizing: border-box;
border-bottom: 1px solid rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(0, 0, 0, 0.1);
cursor: pointer; cursor: pointer;
...@@ -1755,15 +1773,23 @@ input[type="radio"] { ...@@ -1755,15 +1773,23 @@ input[type="radio"] {
} }
&:hover { &:hover {
box-sizing: border-box; box-sizing: border-box;
background-color: rgba(5, 59, 106, 0.1); // background-color: rgba(5, 59, 106, 0.1);
background-color: #053b6a;
border-bottom: none !important; border-bottom: none !important;
.upPic {
color: #31EAEA;
}
.left,
.right {
color: #31EAEA !important;
}
} }
.upPic { .upPic {
display: inline-block; display: inline-block;
margin-left: 40px; margin-left: 40px;
line-height: 48px; line-height: 48px;
font-size: 16px; font-size: 16px;
color: #053b6a; color: #fff;
} }
> i.ju { > i.ju {
position: absolute; position: absolute;
...@@ -1787,6 +1813,7 @@ input[type="radio"] { ...@@ -1787,6 +1813,7 @@ input[type="radio"] {
color: #fff; color: #fff;
} }
> i.arrow-right { > i.arrow-right {
color: #fff !important;
position: absolute; position: absolute;
right: 32px; right: 32px;
top: 16px; top: 16px;
...@@ -1797,16 +1824,16 @@ input[type="radio"] { ...@@ -1797,16 +1824,16 @@ input[type="radio"] {
} }
&.active { &.active {
// background-color: #053b6a; // background-color: #053b6a;
.left, // .left,
.right { // .right {
color: #053b6a; // color: #fff;
} // }
> i { > i {
color: #053b6a; color: #31EAEA;
} }
} }
.left { .left {
color: #053b6a; color: #fff;
line-height: 48px; line-height: 48px;
margin-left: 28px; margin-left: 28px;
.iconfont { .iconfont {
...@@ -1814,7 +1841,7 @@ input[type="radio"] { ...@@ -1814,7 +1841,7 @@ input[type="radio"] {
} }
} }
.right { .right {
color: #1d1d1d; color: #fff;
line-height: 48px; line-height: 48px;
font-size: 16px; font-size: 16px;
margin-left: 4px; margin-left: 4px;
...@@ -1835,6 +1862,7 @@ input[type="radio"] { ...@@ -1835,6 +1862,7 @@ input[type="radio"] {
padding-bottom: 2px; padding-bottom: 2px;
.btn { .btn {
border-radius: 50%; border-radius: 50%;
background:none;
// width: 14px; // width: 14px;
// height: 14px; // height: 14px;
padding: 2px; padding: 2px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment