gkmc -- style

src/views/career/zhiyuan/gkmc.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="simulation">
+  <div class="gkmc">
     <div class="top">
       <img
         src="@/assets/images/career/img_bg.png"
@@ -35,100 +35,114 @@
 </template>
 
 <script>
-import { list } from "@/api/webApi/career-other";
+import { list } from '@/api/webApi/career-other'
+
 export default {
   data() {
     return {
-      list: [],
-    };
+      list: []
+    }
   },
   created() {
     list().then((res) => {
-      this.list = res.rows;
-      console.log(res);
-    });
+      this.list = res.rows
+      console.log(res)
+    })
   },
-  methods:{
-      toDetail(id){
-          this.$router.push({path:'/career/gkmc/detail',query:{id:id}})
-      }
+  methods: {
+    toDetail(id) {
+      this.$router.push({ path: '/career/gkmc/detail', query: { id: id } })
+    }
   }
-};
+}
 </script>
 
 <style lang="scss" scoped>
-.top {
-  position: relative;
-}
-.top .desc {
-  position: absolute;
-  top: 43px;
-  left: 43px;
-}
-.top .desc p:first-child {
-  font-size: 36px;
-  font-family: PingFangSC-Semibold, PingFang SC;
-  font-weight: 600;
-  color: #ffffff;
-  line-height: 50px;
-  margin-bottom: 32px;
-}
-.top .desc p:last-child {
-  font-size: 16px;
-  font-family: PingFangSC-Regular, PingFang SC;
-  font-weight: 400;
-  padding-right: 273px;
-  color: #525252;
-  line-height: 22px;
-}
-.item {
-  width: 100%;
-  background: #fcfcfc;
-  border: 1px solid #dcdcdc;
-  margin-bottom: 16px;
-}
-.tag {
-  position: relative;
-}
-.tag div:first-child {
-  width: 164px;
-  height: 56px;
-  position: relative;
-  top: 24px;
-  text-align: center;
-  line-height: 56px;
-  background: #47c6a2;
-  border-radius: 0px 8px 8px 0px;
-  z-index: 30;
-  color: white;
-}
-.tag .bg {
-  position: absolute;
-  left: 0;
-  top: 30px;
-  left: 8px;
-  width: 164px;
-  height: 56px;
-  background: #737373;
-  border-radius: 0px 8px 8px 0px;
-  opacity: 0.14;
-}
-.data {
-  margin-top: 38px;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  flex-grow: 0;
-}
-.data .data_item {
-  cursor: pointer;
-  text-align: center;
-  height: 60px;
-  line-height: 60px;
-  flex: 25%;
-  flex-grow: 0;
-}
-.data .data_item:hover {
-  color: #47c6a2;
+.gkmc {
+  .top {
+    position: relative;
+  }
+
+  .top .desc {
+    position: absolute;
+    top: 43px;
+    left: 43px;
+  }
+
+  .top .desc p:first-child {
+    font-size: 36px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #ffffff;
+    line-height: 50px;
+    margin-bottom: 32px;
+  }
+
+  .top .desc p:last-child {
+    font-size: 16px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    padding-right: 273px;
+    color: #525252;
+    line-height: 22px;
+  }
+
+  .item {
+    width: 100%;
+    background: #fcfcfc;
+    border: 1px solid #dcdcdc;
+    margin-bottom: 16px;
+  }
+
+  .tag {
+    position: relative;
+  }
+
+  .tag div:first-child {
+    width: 164px;
+    height: 56px;
+    position: relative;
+    top: 24px;
+    text-align: center;
+    line-height: 56px;
+    background: #47c6a2;
+    border-radius: 0px 8px 8px 0px;
+    z-index: 30;
+    color: white;
+  }
+
+  .tag .bg {
+    position: absolute;
+    left: 0;
+    top: 30px;
+    left: 8px;
+    width: 164px;
+    height: 56px;
+    background: #737373;
+    border-radius: 0px 8px 8px 0px;
+    opacity: 0.14;
+  }
+
+  .data {
+    margin-top: 38px;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+    flex-grow: 0;
+  }
+
+  .data .data_item {
+    cursor: pointer;
+    text-align: center;
+    height: 60px;
+    line-height: 60px;
+    flex: 25%;
+    flex-grow: 0;
+  }
+
+  .data .data_item:hover {
+    color: #47c6a2;
+  }
 }
+
 </style>