| src/styles/media/index.scss | ●●●●● patch | view | raw | blame | history | |
| src/views/activity/index.vue | ●●●●● patch | view | raw | blame | history | |
| src/views/lyout/index.vue | ●●●●● patch | view | raw | blame | history | |
| src/views/police/index.vue | ●●●●● patch | view | raw | blame | history |
src/styles/media/index.scss
@@ -35,10 +35,30 @@ width: countSizeVw(132, 1920); height: countSizeVh(36); font-size: countSizeVh(18); .sub-nav-list { border-top: countSizeVh(14) solid transparent; top: countSizeVh(28); left: countSizeVw(72, 1920); div { height: countSizeVh(36); line-height: countSizeVh(36); font-size: countSizeVh(16); } div:first-child { padding-top: countSizeVh(10); } div:last-child { padding-bottom: countSizeVh(10); } } } } } .main-content { top: countSizeVh(60); @@ -296,8 +316,6 @@ .el-icon-arrow-up:before { font-size: countSizeVh(16); line-height: countSizeVh(40); } .el-input__suffix { @@ -306,10 +324,6 @@ .el-select-dropdown__wrap { height: countSizeVh(274); } .el-select-dropdown { width: 2000px; } } @@ -499,6 +513,12 @@ .draw-btn { margin: countSizeVh(8) countSizeVw(8, 1920); height: countSizeVh(26); .el-button--mini{ font-size: countSizeVh(16); padding: countSizeVh(8) 0; border-radius: countSizeVh(4); } } .range-input { @@ -535,6 +555,58 @@ .list-show { .pages { height: countSizeVh(40); &>div { display: flex; align-items: center; &>button { width: countSizeVh(32); height: countSizeVh(32); &>i { font-size: countSizeVh(16); } } &>ul { display: flex; align-items: center; li { width: countSizeVh(32); height: countSizeVh(32); line-height: countSizeVh(32); font-size: countSizeVh(16); } } } } .el-table__header-wrapper { height: countSizeVh(48); .el-table__header { height: 100%; } } .el-table th.el-table__cell { height: 100%; } .el-table .cell { line-height: countSizeVh(48); font-size: countSizeVh(16); } .el-table th.el-table__cell>.cell { height: 100%; } .el-table__empty-text { font-size: countSizeVh(16); } } } @@ -592,8 +664,61 @@ } } .el-table__header-wrapper { height: countSizeVh(48); .el-table__header { height: 100%; } } .el-table th.el-table__cell { height: 100%; } .el-table .cell { line-height: countSizeVh(48); font-size: countSizeVh(16); } .el-table th.el-table__cell>.cell { height: 100%; } .el-table__empty-text { font-size: countSizeVh(16); } .pages { height: countSizeVh(40); &>div { display: flex; align-items: center; &>button { width: countSizeVh(32); height: countSizeVh(32); &>i { font-size: countSizeVh(16); } } &>ul { display: flex; align-items: center; li { width: countSizeVh(32); height: countSizeVh(32); line-height: countSizeVh(32); font-size: countSizeVh(16); } } } } } } @@ -601,7 +726,7 @@ } .activity-page { &-content { .container-content { font-size: countSizeVh(24); .title { @@ -619,27 +744,73 @@ .category { width: countSizeVw(88, 1920); font-size: countSizeVh(16); } .category-value{ .category-input { width: 80%; height: countSizeVh(32); font-size: countSizeVh(14); border: countSizeVh(1) solid rgb(0, 92, 169); border-radius: countSizeVh(5) 0 0 countSizeVw(5, 1920); } .category-button { font-size: countSizeVh(20); // width: countSizeVw(60, 1920); width: 20%; height: countSizeVh(32); border: countSizeVh(1) solid rgb(0, 92, 169); border-radius: 0 countSizeVw(5, 1920) countSizeVh(5) 0; } .category-button:active { border: countSizeVh(1) solid rgb(0, 92, 169); } .el-range-editor.el-input__inner{ width: 100%!important; height: countSizeVh(32); } .el-range-editor .el-range-input{ font-size: countSizeVh(14); height: countSizeVh(32); line-height: countSizeVh(32); } .el-icon-date:before{ font-size: countSizeVh(14); } .el-date-editor .el-range__icon{ line-height: countSizeVh(32); height: countSizeVh(32); margin-left: countSizeVw(4, 1920); } .el-date-editor .el-range-separator{ height: countSizeVh(32); line-height: countSizeVh(32); font-size: countSizeVh(14); } .el-select { width: 100%; height: countSizeVh(32); } .el-input--suffix .el-input__inner{ height: countSizeVh(32); font-size: countSizeVh(14); padding-left: countSizeVw(10, 1920); } .el-select .el-input .el-select__caret{ font-size: countSizeVh(14); line-height: countSizeVh(32); } } input { width: 209px; height: countSizeVh(32); font-size: countSizeVh(12); border: countSizeVh(1) solid rgb(0, 92, 169); border-radius: countSizeVh(5) 0 0 countSizeVw(5, 1920); } button { font-size: countSizeVh(20); width: countSizeVw(60, 1920); height: countSizeVh(32); border: countSizeVh(1) solid rgb(0, 92, 169); border-radius: 0 countSizeVw(5, 1920) countSizeVh(5) 0; } button:active { border: countSizeVh(1) solid rgb(0, 92, 169); } } } @@ -676,6 +847,33 @@ .pages { height: countSizeVh(40); &>div { display: flex; align-items: center; &>button { width: countSizeVh(32); height: countSizeVh(32); &>i { font-size: countSizeVh(16); } } &>ul { display: flex; align-items: center; li { width: countSizeVh(32); height: countSizeVh(32); line-height: countSizeVh(32); font-size: countSizeVh(16); } } } } } } @@ -699,6 +897,28 @@ .second-container { top: countSizeVh(10); width: countSizeVw(240, 1920); .el-tree-node__content{ height: countSizeVh(30); font-size: countSizeVh(16); } .el-tree-node__label{ font-size: countSizeVh(16); } .el-checkbox .el-checkbox__inner{ height: countSizeVh(20); width: countSizeVh(20); border-radius: countSizeVh(2); } .el-tree-node__expand-icon{ font-size: countSizeVh(16); } .el-checkbox .el-checkbox__inner::after{ height: countSizeVh(16); left:countSizeVw(7, 1920); } } .second-container.spread { @@ -750,6 +970,10 @@ } } } .flexible-btn{ font-size: countSizeVh(24); } .main-content.spread { @@ -864,7 +1088,40 @@ } } } .option-css,.activity-option { height: countSizeVh(40); line-height: countSizeVh(40); font-size: countSizeVh(16); } .option-css:hover,.option-css.selected { color: #409EFF; } .option-css:hover { background-color:rgba(0, 92, 169, 0.3) !important; } .el-select-dropdown__wrap { max-height: countSizeVh(200); } .el-picker-panel{ width: countSizeVw(536, 1920)!important; } .el-date-range-picker__header div{ font-size: countSizeVh(16); height: countSizeVh(36); line-height: countSizeVh(36); } .el-picker-panel .el-date-range-picker__header button { font-size: countSizeVh(16); height: countSizeVh(36); line-height: countSizeVh(36); } .el-date-table td span,.el-date-table th{ font-size: countSizeVh(16); } .el-date-table tr{ height: countSizeVh(22); } } } src/views/activity/index.vue
@@ -28,6 +28,7 @@ :key="item.value" :label="item.label" :value="item.value" class="activity-option" ></el-option> </el-select> </div> @@ -35,8 +36,13 @@ <div> <div class="category">活动名称:</div> <div class="category-value"> <input type="text" placeholder="请输入搜索条件" v-model="searchActivity" /> <button class="el-icon-search" @click="searchClick"></button> <input type="text" placeholder="请输入搜索条件" v-model="searchActivity" class="category-input" /> <button class="category-button el-icon-search" @click="searchClick"></button> </div> </div> <div> @@ -60,7 +66,6 @@ start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" style="width:268px" @change="activityTimeChange" ></el-date-picker> </div> src/views/lyout/index.vue
@@ -13,13 +13,23 @@ <div class="main-header"> <!-- <div class="title"></div> --> <div class="menu-list left"> <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list" @click="goToPath(item)" v-for="(item, index) in menuLeftList" :key="index"> <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list" @click="goToPath(item)" v-for="(item, index) in menuLeftList" :key="index" > <span :class="{ on: currentUrl.indexOf(item.path) != -1 }">{{ item.menuName }}</span> <div class="sub-nav-list" v-show="item.children && item.childrenFlag"> <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)"> <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)" > {{ subItem.menuName subItem.menuName }} </div> </div> @@ -33,13 +43,23 @@ <!-- 菜单导航 --> <div class="menu-list right"> <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list" @click="goToPath(item)" v-for="(item, index) in menuRightList" :key="index"> <div @mouseenter="item.childrenFlag = true" @mouseleave="item.childrenFlag = false" class="nav-list" @click="goToPath(item)" v-for="(item, index) in menuRightList" :key="index" > <span :class="{ on: currentUrl.indexOf(item.path) != -1 }">{{ item.menuName }}</span> <div class="sub-nav-list" v-show="item.children && item.childrenFlag"> <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)"> <div v-for="(subItem, subIndex) in item.children" :key="subIndex" @click="goToPath(subItem)" > {{ subItem.menuName subItem.menuName }} </div> </div> @@ -59,15 +79,23 @@ <mapBox ref="modalForm" /> <!-- 主体内容区域 --> <div class="main-content" id="MainContent" :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }"> <div class="main-content" id="MainContent" :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }" > <router-view ref="target-name"></router-view> </div> <el-button v-show="leftShow" class="flexible-btn" <el-button v-show="leftShow" class="flexible-btn" :class="{ 'spread': leftShow && show, 'take-back': leftShow && !show }" :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'" id="FlexibleBtn" type="primary" @click="flexibelClick"></el-button> :icon="show ? 'el-icon-arrow-left' : 'el-icon-arrow-right'" id="FlexibleBtn" type="primary" @click="flexibelClick" ></el-button> </div> </div> </template> @@ -280,7 +308,7 @@ overflow: hidden; letter-spacing: 6px; &>img { & > img { // width: 100%; height: 80%; margin: 0 10px 0 10px; @@ -296,7 +324,7 @@ // border-radius: 10px 16px 10px 16px; transform: skew(58deg); &>span { & > span { transform: skew(-58deg); } } @@ -310,7 +338,7 @@ // border-radius: 16px 10px 16px 10px; transform: skew(-58deg); &>span { & > span { transform: skew(58deg); } } @@ -320,11 +348,10 @@ display: flex; align-items: center; &>.nav-list { & > .nav-list { // color: rgba(32, 106, 181, 1); // border-bottom: 2px solid #409eff; &>span.on { & > span.on { color: rgba(252, 189, 86, 1); } } @@ -372,7 +399,7 @@ } div:hover { background: $table-body-tr-2n-color; background: $table-body-tr-2n-color !important; } } } src/views/police/index.vue
@@ -13,28 +13,48 @@ <div class="police-page container"> <div v-show="boxShow" class="container-content"> <div class="switch-box"> <el-selects v-model="typeValue" @change="navClick" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option> </el-selects> <el-select v-model="typeValue" @change="navClick" placeholder="请选择" class="type-select-css" > <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" class="option-css" ></el-option> </el-select> </div> <div class="list-show" ref="tableBox" v-show="!detailFlag"> <div class="search-box" ref="tableSearchBox"> <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" /> <input v-model="searchValue" @input="searchChange" type="text" placeholder="请输入搜索条件" /> <button @click="searchClick" class="el-icon-search"></button> </div> <div v-show="searchValBoxShow" class="search-val-box"> <div @click="searchVlaClick(item)" v-for="(item, index) in searchArray" :key="index">{{ item.name }} </div> <div @click="searchVlaClick(item)" v-for="(item, index) in searchArray" :key="index" >{{ item.name }}</div> </div> <div class="list" v-show="navType == 1"> <el-table :data="carList" <el-table :data="carList" :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }" :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }" :height="currentTableHeight"> :height="currentTableHeight" > <el-table-column prop="serialNumber" label="编号" min-width="25%"></el-table-column> <el-table-column prop="carType" label="类型" min-width="25%"></el-table-column> <el-table-column prop="status" label="状态" min-width="25%"> @@ -45,10 +65,20 @@ <el-table-column label="操作" align="center" min-width="25%"> <template slot-scope="scope"> <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位"> <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位" > <i class="el-icon-location"></i> </el-button> <el-button @click="carDetail(scope.row)" type="text" size="small" title="轨迹"> <el-button @click="carDetail(scope.row)" type="text" size="small" title="轨迹" > <i class="el-icon-position"></i> </el-button> </template> @@ -56,18 +86,25 @@ </el-table> <div class="pages"> <el-pagination background layout="prev, pager, next" :page-size="pagesize" :page-count="carPagesCount" :current-page="currentPage" @current-change="handleCurrentChange"></el-pagination> <el-pagination background layout="prev, pager, next" :page-size="pagesize" :page-count="carPagesCount" :current-page="currentPage" @current-change="handleCurrentChange" ></el-pagination> </div> </div> <div class="list" v-show="navType == 2"> <el-table :data="phoneList.slice((currentPage - 1) * pagesize, currentPage * pagesize)" <el-table :data="phoneList.slice((currentPage - 1) * pagesize, currentPage * pagesize)" style="width: 100%" :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }" :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }" :height="currentTableHeight"> :height="currentTableHeight" > <el-table-column prop="name" label="名称" min-width="25%"></el-table-column> <el-table-column prop="phoneType" label="类型" min-width="25%"></el-table-column> <el-table-column prop="state" label="状态" min-width="25%"> @@ -78,10 +115,20 @@ <el-table-column label="操作" align="center" min-width="25%"> <template slot-scope="scope"> <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位"> <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位" > <i class="el-icon-location"></i> </el-button> <el-button @click="carDetail(scope.row)" type="text" size="small" title="轨迹"> <el-button @click="carDetail(scope.row)" type="text" size="small" title="轨迹" > <i class="el-icon-position"></i> </el-button> </template> @@ -89,18 +136,26 @@ </el-table> <div class="pages"> <el-pagination background layout="prev, pager, next" :total="phoneList.length" :page-size="pagesize" pager-count="3" :current-page="currentPage" @current-change="handleCurrentChange"></el-pagination> <el-pagination background layout="prev, pager, next" :total="phoneList.length" :page-size="pagesize" pager-count="3" :current-page="currentPage" @current-change="handleCurrentChange" ></el-pagination> </div> </div> <div class="list" v-show="navType == 3"> <el-table :data="dtList.slice((currentPage - 1) * pagesize, currentPage * pagesize)" <el-table :data="dtList.slice((currentPage - 1) * pagesize, currentPage * pagesize)" style="width: 100%" :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }" :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }" :height="currentTableHeight"> :height="currentTableHeight" > <el-table-column prop="name" label="名称" min-width="25%"></el-table-column> <el-table-column prop="dtType" label="类型" min-width="25%"></el-table-column> <el-table-column prop="state" label="状态" min-width="25%"> @@ -111,10 +166,20 @@ <el-table-column label="操作" align="center" min-width="25%"> <template slot-scope="scope"> <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位"> <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位" > <i class="el-icon-location"></i> </el-button> <el-button @click="carDetail(scope.row)" type="text" size="small" title="轨迹"> <el-button @click="carDetail(scope.row)" type="text" size="small" title="轨迹" > <i class="el-icon-position"></i> </el-button> </template> @@ -122,18 +187,26 @@ </el-table> <div class="pages"> <el-pagination background layout="prev, pager, next" :total="dtList.length" :page-size="pagesize" pager-count="3" :current-page="currentPage" @current-change="handleCurrentChange"></el-pagination> <el-pagination background layout="prev, pager, next" :total="dtList.length" :page-size="pagesize" pager-count="3" :current-page="currentPage" @current-change="handleCurrentChange" ></el-pagination> </div> </div> <div class="list" v-show="navType == 4"> <el-table :data="zfList.slice((currentPage - 1) * pagesize, currentPage * pagesize)" <el-table :data="zfList.slice((currentPage - 1) * pagesize, currentPage * pagesize)" style="width: 100%" :header-cell-style="{ 'text-align': 'center', 'background-color': '#203c60', 'borderColor': '#324e75' }" :cell-style="{ 'text-align': 'center', 'borderColor': '#324e75', 'cursor': 'pointer' }" :height="currentTableHeight"> :height="currentTableHeight" > <el-table-column prop="name" label="名称" min-width="25%"></el-table-column> <el-table-column prop="phoneType" label="类型" min-width="25%"></el-table-column> <el-table-column label="状态" min-width="25%"> @@ -144,10 +217,20 @@ <el-table-column label="操作" align="center" min-width="25%"> <template slot-scope="scope"> <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位"> <el-button @click="rowClick(scope.row)" type="text" size="small" title="定位" > <i class="el-icon-location"></i> </el-button> <el-button @click="carDetail(scope.row)" type="text" size="small" title="轨迹"> <el-button @click="carDetail(scope.row)" type="text" size="small" title="轨迹" > <i class="el-icon-position"></i> </el-button> </template> @@ -155,9 +238,15 @@ </el-table> <div class="pages"> <el-pagination background layout="prev, pager, next" :total="zfList.length" :page-size="pagesize" pager-count="3" :current-page="currentPage" @current-change="handleCurrentChange"></el-pagination> <el-pagination background layout="prev, pager, next" :total="zfList.length" :page-size="pagesize" pager-count="3" :current-page="currentPage" @current-change="handleCurrentChange" ></el-pagination> </div> </div> </div> @@ -188,9 +277,15 @@ <li> <div>选择时间:</div> <div class="datetime"> <el-date-picker v-model="trackTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" size="mini" :editable="false" end-placeholder="结束日期"></el-date-picker> <el-date-picker v-model="trackTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" size="mini" :editable="false" end-placeholder="结束日期" ></el-date-picker> </div> </li> @@ -223,9 +318,15 @@ <li> <div>选择时间:</div> <div class="datetime"> <el-date-picker v-model="trackTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" size="mini" :editable="false" end-placeholder="结束日期"></el-date-picker> <el-date-picker v-model="trackTime" type="datetimerange" range-separator="至" start-placeholder="开始日期" size="mini" :editable="false" end-placeholder="结束日期" ></el-date-picker> </div> </li> @@ -236,14 +337,33 @@ </div> </div> <el-dialog :title="dialogTitle" :modal="true" :visible.sync="dialogVisible" :before-close="dialogBeforeClose" :close-on-click-modal="true" class="car-video-box"> <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement" style="object-fit: fill"></video> <el-dialog :title="dialogTitle" :modal="true" :visible.sync="dialogVisible" :before-close="dialogBeforeClose" :close-on-click-modal="true" class="car-video-box" > <video src="/video/sp.mp4" autoplay controls width="100%" height="100%" ref="videoElement" style="object-fit: fill" ></video> </el-dialog> <el-dialog :title="phoneTitle" :modal="true" :visible.sync="phoneVisible" :before-close="phoneBeforeClose" :close-on-click-modal="true" class="phone-details-box"> <el-dialog :title="phoneTitle" :modal="true" :visible.sync="phoneVisible" :before-close="phoneBeforeClose" :close-on-click-modal="true" class="phone-details-box" > <div class="item"> <div>责任人:</div> <div>{{ phoneDetails.person }}</div> @@ -714,7 +834,7 @@ display: flex; justify-content: space-around; &>div { & > div { flex: 1; } } @@ -781,7 +901,7 @@ border-radius: 10px; overflow-y: auto; &>div { & > div { height: 100%; padding: 0 10px; line-height: 36px; @@ -861,18 +981,18 @@ color: #fff; border-bottom: 1px solid #fff; &>div { & > div { text-align: center; } &>div:first-child { & > div:first-child { flex: 2; } &>div:last-child { & > div:last-child { flex: 6; &>div { & > div { width: 100% !important; } }