调整样式

src/common/platform.styl

@@ -3,16 +3,26 @@
   color: #000;
   font-size: 18px;
   font-weight: bold;
-  div {
+  .nav-item {
     cursor: pointer;
     height: 80px;
     line-height: 80px;
     background: #fff;
-    margin-bottom: 2px;
-    text-align: center
+    margin: 0 4px 6px 0;
+    text-align: center;
+    box-shadow: 0 3px 6px rgba(0,0,0,0.16);
+  }
+
+  .nav-item:hover{
+    color: #007CC1 !important;
   }
 }
-.nav-box-active {
+.nav-item-active {
+  cursor: pointer;
+  height: 80px;
+  line-height: 80px;
+  margin: 0 4px 6px 0;
+  text-align: center;
   background: #007CC1 !important;
   color: #fff !important;
 }

src/common/portrait.styl

@@ -188,6 +188,10 @@
   margin-top: 16px;
 }
 
+.mt-5{
+  margin-top: 20px;
+}
+
 .mt-8{
   margin-top: 32px;
 }

src/components/Introduce/PartnerShip.styl

@@ -39,9 +39,9 @@
 }
 
 .enterprise-box{
-    width: 26%;
+    width: 31.3%;
     height: 382px;
-    margin-right: 11%;
+    margin-right: 3%;
     position: relative;
     padding: 0 16px;
 

src/views/About/Children/Organ.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="white">
+    <div class="white pa-3">
       <rich-text :title="title" />
     </div>
   </div>

src/views/About/components/LeftNav.vue

@@ -7,9 +7,12 @@
 -->
 <template>
   <div class="nav-box">
-    <div :class="activeNum === index ? 'nav-box-active' : ''" :key="index" @click="jump(item.url, index)" v-for="(item, index) in list">
-      {{ item.title }}
-    </div>
+    <div
+      :class="activeNum === index ? 'nav-item-active' : 'nav-item'"
+      :key="index"
+      @click="jump(item.url, index)"
+      v-for="(item, index) in list"
+    >{{ item.title }}</div>
   </div>
 </template>
 

src/views/Challenge/Children/Notice.vue

@@ -10,14 +10,17 @@
             @click="choose(index)"
             class="ins-name"
             v-for="(item, index) in list"
-          >
-            {{ item.name }}
-          </span>
+          >{{ item.name }}</span>
         </div>
       </div>
     </div>
     <div class="d-flex flex-wrap">
-      <div :class="(index + 1) % 3 === 0 ? 'margin-0' : ''" :key="index" class="pro-box" v-for="(item, index) in lists">
+      <div
+        :class="(index + 1) % 3 === 0 ? 'margin-0' : ''"
+        :key="index"
+        class="pro-box"
+        v-for="(item, index) in lists"
+      >
         <p class="pro-title">{{ item.title }}</p>
         <p class="pro-content">{{ item.content }}</p>
         <p class="pro-time">时间：{{ item.time }}</p>
@@ -163,8 +166,8 @@ export default {
 }
 
 .pro-box {
-  width: 26%;
-  margin-right: 11%;
+  width: 31.3%;
+  margin-right: 3%;
   height: auto;
   background: #FFFFFF;
   padding: 24px 20px;

src/views/Challenge/Children/Release.vue

@@ -1,7 +1,12 @@
 <template>
   <div>
     <div class="d-flex flex-wrap">
-      <div :class="(index + 1) % 4 === 0 ? 'margin-0' : ''" :key="index" class="pro-box" v-for="(item, index) in lists">
+      <div
+        :class="(index + 1) % 4 === 0 ? 'margin-0' : ''"
+        :key="index"
+        class="pro-box"
+        v-for="(item, index) in lists"
+      >
         <p class="pro-title">{{ item.title }}</p>
         <p class="pro-content">{{ item.content }}</p>
         <p class="pro-time">时间：{{ item.time }}</p>
@@ -171,8 +176,8 @@ export default {
 }
 
 .pro-box {
-  width: 20.5%;
-  margin-right: 6%;
+  width: 23.5%;
+  margin-right: 2%;
   height: 300px;
   background: #FFFFFF;
   padding: 24px 20px;

src/views/Challenge/components/LeftNav.vue

@@ -1,8 +1,11 @@
 <template>
   <div class="nav-box">
-    <div :class="activeNum === index ? 'nav-box-active' : ''" :key="index" @click="jump(item.url, index)" v-for="(item, index) in list">
-      {{ item.title }}
-    </div>
+    <div
+      :class="activeNum === index ? 'nav-item-active' : 'nav-item'"
+      :key="index"
+      @click="jump(item.url, index)"
+      v-for="(item, index) in list"
+    >{{ item.title }}</div>
   </div>
 </template>
 

src/views/ServiceMarket/components/LeftNav.vue

@@ -8,7 +8,7 @@
 <template>
   <div class="nav-box">
     <div
-      :class="activeNum === index ? 'nav-box-active' : ''"
+      :class="activeNum === index ? 'nav-item-active' : 'nav-item'"
       :key="index"
       @click="jump(item.url, index)"
       v-for="(item, index) in list"

src/views/Study/StuDetails.vue

@@ -1,31 +1,45 @@
 <template>
-  <div class="box">
-    <div>
-      <div class="policy-title">
+  <div class="inner">
+    <div class="d-flex flex-column">
+      <div class="font-24 title-color pa-5">
         <span>{{ postDetail.title }}</span>
       </div>
-      <div class="policy-info">
-        <span>
+      <div class="px-5 font-16 line-height-30" v-dompurify-html="postDetail.content"></div>
+      <div class="px-5 py-8 d-flex flex-row-reverse secondary">
+        <span class="ml-8">
           时间：
           <span>{{ postDetail.createdTime }}</span>
         </span>
-        <span style="margin-left: 60px"> 地点：太原 </span>
+        <span>地点：太原</span>
       </div>
-      <div class="policy-content" v-dompurify-html="postDetail.content"></div>
     </div>
-    <div class="coms-style">
-      <div class="coms-top">
-        <div :key="index" style="margin-top: 2em" v-for="(item, index) in coms">
+    <div class="px-3">
+      <a-divider />
+    </div>
+    <div class="fill-width px-3">
+      <div class="coms-top mt-8">
+        <div :key="index" class="my-8" v-for="(item, index) in coms">
           <p style="color: #999">
-            <a-avatar :size="30" :src="item.avatarUrl" alt style="margin-top: -4px; margin-right: 4px" />
+            <a-avatar
+              :size="30"
+              :src="item.avatarUrl"
+              alt
+              style="margin-top: -4px; margin-right: 4px"
+            />
             <span style="margin-right: 10px">{{ item.userName }}</span>
             <span class="coms-content">{{ item.content }}{{ item.content }}{{ item.content }}</span>
           </p>
         </div>
       </div>
-      <div class="coms-btm">
-        <a-textarea placeholder="请输入内容..." style="height: 140px;min-height: 140px；max-height: 140px" v-model="comment" />
-        <a-button @click="sub" class="sub" type="primary">提交</a-button>
+      <div class="fill-width mt-8">
+        <a-textarea
+          placeholder="请输入内容..."
+          style="height: 140px;min-height: 140px；max-height: 140px"
+          v-model="comment"
+        />
+        <div class="d-flex flex-row-reverse">
+          <a-button @click="sub" class="sub" type="primary">发表</a-button>
+        </div>
       </div>
       <!-- <div class="txtara">
         <a-textarea placeholder="请输入..." :rows="4" v-model="comment" />
@@ -95,73 +109,18 @@ export default {
 </script>
 
 <style lang="stylus" scoped>
-.box {
-  width: 1260px;
-  position: relative;
+.inner {
   margin: 80px auto;
   background: #fff;
-  min-height: 1037px;
   overflow: hidden;
   opacity: 1;
-  padding-bottom: 480px;
-}
-
-.back-btn {
-  width: 80px;
-  position: absolute;
-  right: 0;
-}
-
-.policy-title {
-  height: 120px;
-  font-size: 24px;
-  font-family: Microsoft YaHei;
-  font-weight: 400;
-  color: rgba(0, 0, 0, 0.85);
-  opacity: 1;
-  text-align: left;
-  display: flex;
-  align-items: center;
-  justify-content: left;
-  padding: 0 25px;
-}
-
-.policy-info {
-  position: absolute;
-  height: 76px;
-  line-height: 76px;
-  right: 25px;
-  bottom: 500px;
-  text-align: center;
-}
-
-.policy-content {
-  padding: 0 25px;
-  font-size: 16px;
-  color: rgba(0, 0, 0, 0.65);
-  font-weight: 400;
-  font-family: Microsoft YaHei;
-}
-
-.coms-style {
-  height: 480px;
-  padding: 25px 0;
-  border-top: 2px solid #ccc;
-  position: absolute;
-  bottom: 0;
-  width: 100%;
 }
 
 .coms-top {
   height: 280px;
   padding: 0 25px;
   overflow: auto;
-  box-shadow: 0 0 5px #ccc;
-}
-
-.coms-btm {
-  margin-top: 20px;
-  padding: 0 10px;
+  // box-shadow: 0 0 5px #ccc;
 }
 
 .coms-content {
@@ -169,8 +128,6 @@ export default {
 }
 
 .sub {
-  position: absolute;
-  right: 20px;
-  bottom: 20px;
+  margin: 20px 0 100px;
 }
 </style>

src/views/Study/Study.vue

@@ -6,10 +6,9 @@
 
 <template>
   <div class="inner">
-    <div class="search-list">
+    <div class="d-flex flex-row-reverse mb-8">
       <a-input-search
         @search="searchData"
-        class="search"
         enter-button="搜索"
         placeholder="请输入..."
         style="width: 381px"
@@ -17,36 +16,22 @@
       />
     </div>
     <div :key="index" class="post" v-for="(item, index) in lists">
-      <div class="d-flex flex-nowrap">
+      <div class="d-flex flex-nowrap fill-height">
         <img :src="item.visitLocation" alt class="post-img" v-if="item.visitLocation" />
-        <div>
-          <div class="post-content">
+        <div class="flex-1 flex-column">
           <p class="post-title">{{ item.title }}</p>
           <div class="con-con" v-dompurify-html="item.content"></div>
-          </div>
-          <p style="color: rgba(0, 0, 0, 0.45); line-height: 30px; margin: 0 0 0 30px !important; margin-left: 0 !important">
+          <div class="d-flex flex-nowrap secondary line-height-30 mt-8">
             <span>{{ item.createdTime }}</span>
-            <span style="margin-left: 20px"> 地点：太原 </span>
-          </p>
-        </div>
-      </div>
-
-      <p class="look-down baseColor">
-        <span @click="getDet(item.id, index)">
+            <span style="margin-left: 20px">地点：太原</span>
+            <div class="flex-1"></div>
+            <span @click="getDet(item.id, index)" class="baseColor pointer">
               查看详情
               <a-icon type="arrow-right" />
             </span>
-      </p>
-      <!-- <div class="comment">
-        <div :key="b" v-for="(a, b) in coms">
-          <p style="padding-left: 20px">
-            <a-avatar :size="20" :src="a.avatarUrl" style="margin-top: -4px" />
-            <span>{{ a.userName }}</span>
-            <span style="margin-left: 20px">{{ a.creatTime }}</span>
-          </p>
-          <p class="coms-con">{{ a.content }}</p>
           </div>
-      </div> -->
+        </div>
+      </div>
     </div>
     <a-pagination
       :current="comCurrent"
@@ -145,7 +130,7 @@ export default {
 }
 
 .post-title {
-  // width: 165px;
+  width: 100%;
   height: 26px;
   font-size: 20px;
   font-family: Microsoft YaHei;
@@ -159,19 +144,6 @@ export default {
   -webkit-box-orient: vertical;
 }
 
-.search-list {
-  height: 72px;
-  line-height: 72px;
-  padding: 0 24px;
-  position: relative;
-}
-
-.search {
-  position: absolute;
-  right: 0;
-  top: 20px;
-}
-
 .btn {
   width: 75px;
   height: 32px;
@@ -185,7 +157,7 @@ export default {
   padding: 25px;
   position: relative;
   overflow: hidden;
-  height: 270px;
+  height: 290px;
   background: #fff;
   border-bottom: 1px solid #ccc;
   transition: all 0.25s;
@@ -198,28 +170,15 @@ export default {
   margin-right: 30px;
 }
 
-.post-content {
-  // margin-left: 30px;
-  overflow: hidden;
-  height: 180px;
-  text-indent: left;
-}
-
 .con-con {
-  max-height: 130px;
+  line-height: 30px;
+  height: 120px;
+  overflow: hidden;
   display: -webkit-box;
   -webkit-line-clamp: 4;
   -webkit-box-orient: vertical;
 }
 
-.look-down {
-  position: absolute;
-  right: 25px;
-  bottom: 10px;
-  cursor: pointer;
-  margin-bottom: 0;
-}
-
 .pagination {
   margin-top: 48px;
   text-align: right;