feat:新增公告管理及水文站管理页面

src/views/announcement-management/index.vue

@@ -1,66 +1,106 @@
 <template>
   <div class="main-contaner">
-    <el-form :model="form" label-width="100px" ref="searchForm">
+    <el-form :model="searchForm" label-width="100px" ref="searchForm">
       <el-row>
         <el-col :span="8">
           <el-form-item label="公告名称">
-            <el-input v-model="form.name" placeholder="请输入"></el-input>
+            <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="公告状态">
-            <el-select v-model="form.status" placeholder="请选择">
+            <el-select v-model="searchForm.status" placeholder="请选择">
               <el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
             </el-select>
           </el-form-item>
         </el-col>
         <el-col :span="8">
           <el-form-item label="创建人">
-            <el-input v-model="form.createUser" placeholder="请输入"></el-input>
+            <el-input v-model="searchForm.createUser" placeholder="请输入"></el-input>
           </el-form-item>
         </el-col>
       </el-row>
       <el-row>
         <el-col :span="8">
           <el-form-item label="创建时间">
-            <el-date-picker v-model="form.createDate" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"> </el-date-picker>
+            <el-date-picker v-model="searchForm.createDate" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"> </el-date-picker>
           </el-form-item>
         </el-col>
       </el-row>
-      <el-row justify="space-between">
-        <el-col :span="12">
-          <el-button icon="el-icon-plus">新增公告</el-button>
+      <el-row justify="space-between" class="mb20">
+        <el-col :span="12" style="text-align: left">
+          <el-button size="small" icon="el-icon-plus" class="primaryBtn" @click="toAdd">新增公告</el-button>
         </el-col>
-        <el-col :span="12" style="text-align: right;">
-          <el-button icon="el-icon-search" @click="handleSearch">查询</el-button>
-          <el-button icon="el-icon-refresh-right" @click="resetForm">重置</el-button>
+        <el-col :span="12" style="text-align: right">
+          <el-button size="small" icon="el-icon-search" @click="handleSearch" class="primaryBtn">查询</el-button>
+          <el-button size="small" icon="el-icon-refresh-right" @click="resetForm">重置</el-button>
         </el-col>
       </el-row>
     </el-form>
-    <el-table :data="tableData" border style="width: 100%">
-      <el-table-column prop="name" label="公告名称" width="180"> </el-table-column>
-      <el-table-column prop="createUser" label="创建人"> </el-table-column>
-      <el-table-column prop="createDate" label="创建时间" width="100"> </el-table-column>
-      <el-table-column prop="status" label="公告状态"></el-table-column>
-      <el-table-column label="操作" width="180">
+    <el-table :data="tableData" border style="width: 100%" height="580">
+      <el-table-column prop="name" label="公告名称" align="center"> </el-table-column>
+      <el-table-column prop="createUser" label="创建人" align="center"> </el-table-column>
+      <el-table-column prop="createDate" label="创建时间" align="center"> </el-table-column>
+      <el-table-column prop="status" label="公告状态" align="center"></el-table-column>
+      <el-table-column label="操作" align="center">
         <template slot-scope="scope">
-          <el-button size="mini" type="text" @click="handleRelease(scope.row)">发布</el-button>
-          <el-button size="mini" type="text" @click="handleTakeDown(scope.row)">下架</el-button>
-          <el-button size="mini" type="text" @click="handleEdit(scope.row)">编辑</el-button>
-          <el-button size="mini" type="text" @click="handleDelete(scope.row)">删除</el-button>
+          <el-button size="small" type="text" @click="handleRelease(scope.row)"><img src="@/assets/image/common/p0.png" class="vIcon"/> 发布</el-button>
+          <el-button size="small" type="text" @click="handleTakeDown(scope.row)"><img src="@/assets/image/common/p3.png" class="vIcon"/>下架</el-button>
+          <el-button size="small" type="text" @click="handleEdit(scope.row)"><i class="el-icon-edit"></i> 编辑</el-button>
+          <el-button size="small" type="text" @click="handleDelete(scope.row)"><i class="el-icon-delete"></i> 删除</el-button>
         </template>
       </el-table-column>
     </el-table>
     <el-pagination
+      class="page"
       @size-change="handleSizeChange"
       @current-change="handleCurrentChange"
       :current-page="currentPage"
       :page-sizes="[10, 20, 50, 100]"
       :page-size="pageSize"
+      small
+      background
       layout="total, sizes, prev, pager, next, jumper"
       :total="total"
     >
     </el-pagination>
+    <el-dialog :title="title" :visible.sync="addDialogVisible">
+      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="公告名称" prop="name">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+        <el-form-item label="公告内容" prop="content">
+          <el-input type="textarea" :rows="10" v-model="form.content"> </el-input>
+        </el-form-item>
+        <el-form-item label="上传图片" required>
+          <el-upload
+            class="avatar-uploader"
+            action="https://jsonplaceholder.typicode.com/posts/"
+            :show-file-list="false"
+            :on-success="handleAvatarSuccess"
+            :before-upload="beforeAvatarUpload"
+          >
+            <el-button size="small" class="primaryBtn">上传</el-button>
+            <div slot="tip" class="el-upload__tip">温馨提示:仅需上传一张小于5M的配图即可，格式支持JPG、PNG、JPEG</div>
+          </el-upload>
+        </el-form-item>
+        <el-form-item label="公告状态">
+          <el-radio v-model="form.status" label="1">草稿</el-radio>
+          <el-radio v-model="form.status" label="2">发布</el-radio>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="confirmSubmit" size="small" class="primaryBtn">确 定</el-button>
+        <el-button @click="addDialogVisible = false" size="small">取 消</el-button>
+      </div>
+    </el-dialog>
+    <el-dialog :title="releaseTitle" :visible.sync="releaseDialogVisible" width="30%" :before-close="handleClose">
+      <span> 确定改变本条公告状态为“{{ type == 1 ? '发布' : '草稿' }}”吗？</span>
+      <span slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="toConfirm" size="small" class="primaryBtn">确 定</el-button>
+        <el-button @click="releaseDialogVisible = false" size="small">取 消</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -68,12 +108,19 @@
 export default {
   data() {
     return {
-      form: {
+      searchForm: {
         name: '',
         status: '',
         createUser: '',
         createDate: ''
       },
+      imageUrl: '',
+      form: {
+        name: '',
+        img: '',
+        status: '1',
+        content: ''
+      },
       statusOptions: [
         {
           value: '1',
@@ -94,41 +141,116 @@ export default {
       ],
       currentPage: 1,
       pageSize: 10,
-      total: 0
+      total: 0,
+      title: '新增公告',
+      addDialogVisible: false,
+      releaseTitle: '发布公告',
+      releaseDialogVisible: false,
+      type: 1,
+      rules: {
+          name: [
+            { required: true, message: '请输入公告名称', trigger: 'blur' },
+          ],
+          content: [
+            { required: true, message: '请输入公告内容', trigger: 'blur' }
+          ],
+          address:[
+            {required:true,message:'请输入水文站位置',trigger:'blur'}
+          ],
+       }
     }
   },
   methods: {
-    handleSearch() {
-    },
+    handleSearch() {},
     resetForm() {
       this.$refs.searchForm.resetFields()
     },
     handleRelease(row) {
       console.info(row)
+      this.releaseTitle = '发布公告'
+      this.type = 1
+      this.releaseDialogVisible = true
     },
-    handleTakeDown(row){
+    handleTakeDown(row) {
       console.info(row)
+      this.releaseTitle = '下架公告'
+      this.type = 2
+      this.releaseDialogVisible = true
     },
     handleEdit(row) {
       console.info(row)
+      this.title = '编辑公告'
+      this.addDialogVisible = true
     },
     handleDelete(row) {
       console.info(row)
     },
-     handleSizeChange(val) {
-      this.pageSize = val;
-      this.fetchData();
+    handleSizeChange(val) {
+      this.pageSize = val
+      this.fetchData()
     },
     handleCurrentChange(val) {
-      this.currentPage = val;
-      this.fetchData();
+      this.currentPage = val
+      this.fetchData()
+    },
+    fetchData() {},
+    handleAvatarSuccess(res, file) {
+      this.imageUrl = URL.createObjectURL(file.raw)
     },
-    fetchData(){
+    beforeAvatarUpload(file) {
+      const isJPG = file.type === 'image/jpeg'
+      const isLt2M = file.size / 1024 / 1024 < 2
 
+      if (!isJPG) {
+        this.$message.error('上传头像图片只能是 JPG 格式!')
+      }
+      if (!isLt2M) {
+        this.$message.error('上传头像图片大小不能超过 2MB!')
+      }
+      return isJPG && isLt2M
+    },
+    toAdd() {
+      this.title = '新增公告'
+      this.addDialogVisible = true
+    },
+    toConfirm() {
+      if (this.type) {
+        console.info('发布')
+      } else {
+        console.info('下架')
+      }
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.main-contaner {
+  :deep(.el-form .el-select),
+  :deep(.el-input__inner) {
+    width: 100%;
+  }
+  .mb20 {
+    margin-bottom: 20px;
+  }
+  .page {
+    margin-top: 20px;
+    text-align: right;
+  }
+  .primaryBtn {
+    color: #fff !important;
+    background-color: #ff6a6c !important;
+    border-color: #ff6a6c !important;
+  }
+  .el-upload__tip {
+    color: #ff6a6c;
+  }
+  .vIcon{
+    width: 12px;
+    height: 12px;
+  }
+}
+ :deep(.el-pager li.active){
+    background-color: rgba(240, 105, 106, 1)!important;
+  }
 </style>

src/views/comprehensive-overview/left.vue

@@ -226,6 +226,7 @@ export default {
         .detailBtn {
           width: px-to-rem(48);
           height: px-to-rem(24);
+          line-height: px-to-rem(24);
           background: linear-gradient(0deg, #468adb 0%, #366dae 100%);
           border-radius: px-to-rem(4);
           border: px-to-rem(1) solid;

src/views/hydrological-station/hyInfo.vue

@@ -0,0 +1,264 @@
+<template>
+  <div class="main-contaner">
+    <el-form :model="searchForm" label-width="100px" ref="searchForm">
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="水文站名称">
+            <el-input v-model="searchForm.name" placeholder="请输入"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="8">
+          <el-form-item label="水文站编号">
+            <el-input
+              v-model="searchForm.number"
+              placeholder="请输入"
+            ></el-input>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row justify="space-between" class="mb20">
+        <el-col :span="12" style="text-align: left">
+          <el-button
+            size="small"
+            icon="el-icon-plus"
+            class="primaryBtn"
+            @click="toAdd"
+            >新增水文站</el-button
+          >
+        </el-col>
+        <el-col :span="12" style="text-align: right">
+          <el-button
+            size="small"
+            icon="el-icon-search"
+            @click="handleSearch"
+            class="primaryBtn"
+            >查询</el-button
+          >
+          <el-button
+            size="small"
+            icon="el-icon-refresh-right"
+            @click="resetForm"
+            >重置</el-button
+          >
+        </el-col>
+      </el-row>
+    </el-form>
+    <el-table :data="tableData" border style="width: 100%" height="550">
+      <el-table-column prop="number" label="水文站编号" align="center">
+      </el-table-column>
+      <el-table-column prop="name" label="水文站名称" align="center">
+      </el-table-column>
+      <el-table-column prop="createDate" label="水文站位置" align="center">
+      </el-table-column>
+      <el-table-column
+        prop="status"
+        label="水文站经纬度"
+        align="center"
+      ></el-table-column>
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button size="small" type="text" @click="jcInfo(scope.row)"
+            ><img src="@/assets/image/common/p3.png" class="vIcon"/> 监测信息</el-button
+          >
+          <el-button size="small" type="text" @click="handleEdit(scope.row)"
+            ><i class="el-icon-edit"></i> 编辑</el-button
+          >
+          <el-button size="small" type="text" @click="handleDelete(scope.row)"
+            ><i class="el-icon-delete"></i> 删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      class="page"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="currentPage"
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="pageSize"
+      background
+      small
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="total"
+    >
+    </el-pagination>
+    <el-dialog :title="title" :visible.sync="addDialogVisible">
+      <el-form ref="form" :model="form" :rules="rules" label-width="110px">
+        <el-form-item label="水文站名称：" prop="name">
+          <el-input v-model="form.name"></el-input>
+        </el-form-item>
+        <el-form-item label="水文站编号：" prop="number">
+          <el-input v-model="form.number"> </el-input>
+        </el-form-item>
+        <el-form-item label="水文站位置：" prop="address">
+          <el-input v-model="form.address"> </el-input>
+        </el-form-item>
+        <el-form-item label="经度：" prop="lat">
+          <el-input v-model="form.lat"> </el-input>
+        </el-form-item>
+        <el-form-item label="纬度：" prop="lng">
+          <el-input v-model="form.lng"> </el-input>
+        </el-form-item>
+        <el-form-item label="水文站详情：" prop="detailInfo">
+          <el-input type="textarea" :rows="6" v-model="form.detailInfo">
+          </el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button
+          type="primary"
+          @click="confirmSubmit"
+          size="small"
+          class="primaryBtn"
+          >确 定</el-button
+        >
+        <el-button @click="addDialogVisible = false" size="small"
+          >取 消</el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchForm: {
+        name: "",
+        number: "",
+      },
+      imageUrl: "",
+      form: {
+        name: "",
+        number: "",
+        lat: "",
+        lng: "",
+        detailInfo: "",
+        address: "",
+      },
+      statusOptions: [
+        {
+          value: "1",
+          label: "草稿",
+        },
+        {
+          value: "2",
+          label: "已发布",
+        },
+      ],
+      tableData: [
+        {
+          name: "",
+          status: "",
+          createUser: "",
+          createDate: "",
+        },
+         {
+          name: "",
+          status: "",
+          createUser: "",
+          createDate: "",
+        },
+         {
+          name: "",
+          status: "",
+          createUser: "",
+          createDate: "",
+        },
+         {
+          name: "",
+          status: "",
+          createUser: "",
+          createDate: "",
+        }, {
+          name: "",
+          status: "",
+          createUser: "",
+          createDate: "",
+        },
+      ],
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      title: "新增文水站",
+      addDialogVisible: false,
+      type: 1,
+      rules: {
+        name: [
+          { required: true, message: "请输入水文站名称", trigger: "blur" },
+        ],
+        number: [
+          { required: true, message: "请输入水文站编码", trigger: "blur" },
+        ],
+        address: [
+          { required: true, message: "请输入水文站位置", trigger: "blur" },
+        ],
+        lat: [{ required: true, message: "请输入经度", trigger: "blur" }],
+        lng: [{ required: true, message: "请输入纬度", trigger: "blur" }],
+      },
+    };
+  },
+  methods: {
+    handleSearch() {},
+    resetForm() {
+      this.$refs.searchForm.resetFields();
+    },
+    jcInfo(row) {
+      console.info(row);
+      this.$emit('closeHy')
+    },
+    handleEdit(row) {
+      console.info(row);
+      this.title = "编辑公告";
+      this.addDialogVisible = true;
+    },
+    handleDelete(row) {
+      console.info(row);
+    },
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.fetchData();
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.fetchData();
+    },
+    fetchData() {},
+    toAdd() {
+      this.title = "新增文水站";
+      this.addDialogVisible = true;
+    },
+    confirmSubmit() {}
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-form .el-select),
+:deep(.el-input__inner) {
+  width: 100%;
+}
+.mb20 {
+  margin-bottom: 20px;
+}
+.page {
+  margin-top: 20px;
+  text-align: right;
+}
+.primaryBtn {
+  color: #fff !important;
+  background-color: #ff6a6c !important;
+  border-color: #ff6a6c !important;
+}
+.el-upload__tip {
+  color: #ff6a6c;
+}
+.vIcon{
+    width: 12px;
+    height: 12px;
+}
+ :deep(.el-pager li.active){
+    background-color: rgba(240, 105, 106, 1)!important;
+  }
+</style>

src/views/hydrological-station/index.vue

@@ -1,15 +1,21 @@
 <template>
   <div class="main-contaner">
-    水文站管理
+    <HyInfo v-if="hyInfoShow" @closeHy="hyInfoShow = false"/>
+    <JcInfo v-if="!hyInfoShow" @toBack="hyInfoShow = true"/>
   </div>
 </template>
 
 <script>
+import HyInfo from './hyInfo.vue'
+import JcInfo from './jcInfo.vue'
 export default {
-
-}
-</script>
-
-<style lang="scss" scoped>
- 
-</style>
+  data() {
+    return {
+      hyInfoShow:true,
+    };
+  },
+  components:{
+    HyInfo,JcInfo
+  }
+};
+</script>

src/views/hydrological-station/jcInfo.vue

@@ -0,0 +1,261 @@
+<template>
+  <div class="main-contaner">
+    <el-form :model="searchForm" label-width="100px" ref="searchForm">
+      <el-row>
+        <el-col :span="8">
+          <el-form-item label="上传时间">
+            <el-date-picker
+              v-model="searchForm.createDate"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+            >
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+      </el-row>
+      <el-row justify="space-between" class="mb20">
+        <el-col :span="12" style="text-align: left">
+          <el-button
+            size="small"
+            icon="el-icon-plus"
+            class="primaryBtn"
+            @click="toAdd"
+            >新增监测数据</el-button
+          >
+          <el-button class="primaryBtn" size="small"><img src="@/assets/image/common/u88.png" class="vIcon"/> 导入</el-button>
+        </el-col>
+        <el-col :span="12" style="text-align: right">
+          <el-button
+            size="small"
+            icon="el-icon-search"
+            @click="handleSearch"
+            class="primaryBtn"
+            >查询</el-button
+          >
+          <el-button
+            size="small"
+            icon="el-icon-refresh-right"
+            @click="resetForm"
+            >重置</el-button
+          >
+        </el-col>
+      </el-row>
+    </el-form>
+    <el-table :data="tableData" border style="width: 100%" height="600">
+      <el-table-column prop="name" label="实时高程(m)" align="center">
+      </el-table-column>
+      <el-table-column prop="name" label="昨日最高高程(m)" align="center">
+      </el-table-column>
+      <el-table-column prop="name" label="1小时雨量(mm)" align="center">
+      </el-table-column>
+      <el-table-column prop="name" label="当天雨量(mm）" align="center">
+      </el-table-column>
+       <el-table-column prop="name" label="实时流量(m³/s)" align="center">
+      </el-table-column>
+       <el-table-column prop="name" label="实时流速(m/s)" align="center">
+      </el-table-column>
+       <el-table-column prop="name" label="上传时间" align="center">
+      </el-table-column>
+       <el-table-column prop="name" label="上传人" align="center">
+      </el-table-column>
+      <el-table-column label="操作" align="center">
+        <template slot-scope="scope">
+          <el-button size="small" type="text" @click="handleEdit(scope.row)"
+            ><i class="el-icon-edit"></i> 编辑</el-button
+          >
+          <el-button size="small" type="text" @click="handleDelete(scope.row)"
+            ><i class="el-icon-delete"></i> 删除</el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <el-pagination
+      class="page"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+      :current-page="currentPage"
+      background
+      small
+      :page-sizes="[10, 20, 50, 100]"
+      :page-size="pageSize"
+      layout="total, sizes, prev, pager, next, jumper"
+      :total="total"
+    >
+    </el-pagination>
+    <div class="backBtn">
+      <el-button size="small" @click="toBack">返回</el-button>
+    </div>
+    <el-dialog :title="title" :visible.sync="addDialogVisible">
+      <el-form ref="form" :model="form" label-width="110px" class="addJcForm">
+        <el-form-item label="实时高程：">
+          <el-input v-model="form.name"></el-input> <span>m</span>
+        </el-form-item>
+        <el-form-item label="昨日最高高程：">
+          <el-input v-model="form.content">
+          </el-input><span>m</span>
+        </el-form-item>
+        <el-form-item label="1小时雨量：">
+          <el-input v-model="form.content">
+          </el-input> <span>mm</span>
+        </el-form-item>
+        <el-form-item label="当天雨量：">
+          <el-input v-model="form.content">
+          </el-input> <span>mm</span>
+        </el-form-item>
+          <el-form-item label="实时流量：">
+          <el-input v-model="form.content">
+          </el-input> <span>m³/s</span>
+        </el-form-item>
+          <el-form-item label="实时流速：">
+          <el-input v-model="form.content">
+          </el-input><span>m/s</span>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button
+          type="primary"
+          @click="confirmSubmit"
+          size="small"
+          class="primaryBtn"
+          >确 定</el-button
+        >
+        <el-button @click="addDialogVisible = false" size="small"
+          >取 消</el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      searchForm: {
+        name: "",
+        status: "",
+        createUser: "",
+        createDate: "",
+      },
+      imageUrl: "",
+      form: {
+        name: "",
+        content: "",
+      },
+      tableData: [
+        {
+          name: ""
+        },
+        {
+          name: ""
+        },
+        {
+          name: ""
+        },{
+          name: ""
+        },{
+          name: ""
+        },{
+          name: ""
+        },{
+          name: ""
+        },{
+          name: ""
+        },{
+          name: ""
+        },{
+          name: ""
+        },{
+          name: ""
+        },{
+          name: ""
+        },{
+          name: ""
+        },
+      ],
+      currentPage: 1,
+      pageSize: 10,
+      total: 0,
+      title: "新增监测数据",
+      addDialogVisible: false,
+      type: 1,
+    };
+  },
+  methods: {
+    handleSearch() {},
+    resetForm() {
+      this.$refs.searchForm.resetFields();
+    },
+    toBack(){
+      this.$emit('toBack')
+    },
+    handleEdit(row) {
+      console.info(row);
+      this.title = '编辑监测数据'
+      this.addDialogVisible = true
+    },
+    handleDelete(row) {
+      console.info(row);
+    },
+    handleSizeChange(val) {
+      this.pageSize = val;
+      this.fetchData();
+    },
+    handleCurrentChange(val) {
+      this.currentPage = val;
+      this.fetchData();
+    },
+    fetchData() {},
+    toAdd() {
+      this.title = "新增监测数据";
+      this.addDialogVisible = true;
+    },
+    confirmSubmit(){
+
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+:deep(.el-form .el-select),
+:deep(.el-input__inner) {
+  width: 100%;
+}
+.mb20 {
+  margin-bottom: 20px;
+}
+.page {
+  margin-top: 20px;
+  text-align: right;
+}
+.primaryBtn {
+  color: #fff !important;
+  background-color: #ff6a6c !important;
+  border-color: #ff6a6c !important;
+}
+.el-upload__tip {
+  color: #ff6a6c;
+}
+.vIcon{
+  width: 10px;
+  height: 10px;
+}
+.addJcForm :deep(.el-form-item__content){
+  display: flex;
+}
+.addJcForm :deep(.el-form-item__content span){
+  display: inline-block;
+  width: 32px;
+  margin-left: 10px;
+}
+.backBtn{
+  text-align: center;
+  margin-top: 10px;
+}
+ :deep(.el-pager li.active){
+    background-color: rgba(240, 105, 106, 1)!important;
+  }
+</style>