通用顶部样式

components/page.vue

@@ -1,6 +1,7 @@
 <template>
   <section id="proginn-container">
     <proginn-header v-if="isPC != -1 && isPC"/>
+    <wx-header v-if="isWeixin"></wx-header>
     <slot name="menu"></slot>
     <slot></slot>
     <proginn-footer v-if="isPC != -1 && isPC"/>
@@ -10,26 +11,31 @@
 <script>
 import ProginnHeader from '@/components/header'
 import ProginnFooter from '@/components/footer'
+import WxHeader from '@/components/wx_header'
 import { mapState, mapMutations } from 'vuex'
 
 export default {
   components: {
     ProginnHeader,
-    ProginnFooter
+    ProginnFooter,
+    WxHeader,
   },
   computed: {
-    ...mapState(['isPC']),
+    ...mapState(['isPC', `isWeixin`]),
   },
   mounted() {
-    this.checkInnerWidth()
+    this.checkTerminal()
     window.addEventListener('resize', this.checkInnerWidth)
   },
   methods: {
-    ...mapMutations(['updateIsPC']),
-    checkInnerWidth() {
+    ...mapMutations(['updateIsPC', 'updateIsWeixin']),
+    checkTerminal() {
       this.updateIsPC({
         isPC: window.innerWidth > 960,
       })
+      this.updateIsWeixin({
+        isWeixin: true
+      })
     }
   }
 }

components/wx_header.vue

@@ -0,0 +1,80 @@
+<template>
+  <section class="wx-header">
+    <!-- <div class="ui dropdown right top pointing">
+      <i
+        class="sidebar icon"
+        style="font-size: 20px;color: #000;padding-right: 15px;padding-top: 5px;"
+      ></i>
+      <div class="menu">
+        <a class="item" href="__ROOT__/cat/">
+          <i class="user icon"></i>程序员
+        </a>
+        <a class="item" href="/community/">
+          <i class="comment icon"></i>技术圈
+        </a>
+        <a class="item" href="http://support.<?php echo BRAND_DOMAIN;?>/">
+          <i class="help circle icon"></i>帮助
+        </a>
+        <a class="item" href="https://inn.proginn.com/sites/">
+          <i class="users icon"></i>合作伙伴
+        </a>
+      </div>
+    </div> -->
+    <img class="logo" src="https://stacdn.proginn.com/image/common/logo3@2x.png" alt="icon">
+    <el-dropdown class="nav-dropdown">
+      <el-button class="text" type="text" style="font-size: 18px;">
+        <i class="el-icon-tickets" style="width: 40px;"></i>
+      </el-button>
+      <el-dropdown-menu slot="dropdown">
+        <el-dropdown-item>
+          <a class="workstation text" href="/wo/work_todo">
+            <i class="el-icon-service"></i><span>程序员</span>
+          </a>
+        </el-dropdown-item>
+        <el-dropdown-item>
+          <a class="workstation text" href="/wo/work_platform">
+            <i class="el-icon-message"></i><span>技术圈</span>
+          </a>
+        </el-dropdown-item>
+        <el-dropdown-item>
+          <a class="workstation text" href="/wo/work_hire">
+            <i class="el-icon-question"></i><span>帮助</span>
+          </a>
+        </el-dropdown-item>
+        <el-dropdown-item>
+          <a class="workstation text" href="/wo/work_cloud">
+            <i class="el-icon-phone"></i><span>合作伙伴</span>
+          </a>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
+  </section>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style scoped>
+.wx-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 64px;
+  padding: 0 20px;
+  background: white;
+}
+.logo {
+  width: auto;
+  height: 32px;
+}
+.text, .text i {
+  color: #333;
+}
+.text span {
+  padding-left: 10px;
+}
+</style>

pages/cert/index.vue

@@ -34,6 +34,7 @@
               </section>
             </section>
           </section>
+          <div class="line"></div>
         </li>
       </ul>
     </section>
@@ -78,7 +79,7 @@ export default {
 
 <style scoped>
 .cert-index {
-  width: 1000px;
+  max-width: 1000px;
   min-height: 591px;
   background: white;
   border-radius: 4px;
@@ -101,6 +102,7 @@ h1 {
   display: none;
 }
 .cer-box {
+  position: relative;
   display: flex;
   margin-top: 26px;
 }
@@ -129,10 +131,6 @@ h1 {
   color: #308eff;
 }
 .cer-remind {
-  width: 680px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   font-size: 14px;
   font-family: PingFangSC-Regular;
   color: rgba(153, 153, 153, 1);
@@ -169,7 +167,6 @@ h1 {
 }
 .cer-ctrl {
   margin: 10px 0 0;
-  width: 154px;
   height: 40px;
   background: #0093fd;
   font-size: 14px;
@@ -185,4 +182,64 @@ h1 {
   font-family: PingFangSC-Regular;
   color: rgba(153, 153, 153, 1);
 }
+@media screen and (min-width: 960px) {
+  .cer-remind {
+    width: 680px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .cer-ctrl {
+    width: 154px;
+  }
+}
+@media screen and (max-width: 960px) {
+  .cert-index {
+    padding: 0;
+  }
+  .cer-box {
+    height: 180px;
+    padding: 0 8px;
+  }
+  .cer-img {
+    width: 135px;
+    height: 95px;
+    padding: 0;
+  }
+  .cer-title {
+    margin-top: 0;
+  }
+  .cer-remind {
+    width: 200px;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    font-size: 12px;
+    min-height: 48px;
+  }
+  .cer-price-info {
+    position: absolute;
+    left: 8px;
+    bottom: 40px;
+  }
+  .cer-ctrl {
+    width: 100px;
+    border-radius: 40px;
+    transform: translateX(100px);
+  }
+  .userful-time {
+    position: absolute;
+    bottom: 0px;
+    left: 0;
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    border-top: 1px solid #eee;
+    padding: 8px;
+  }
+  .line {
+    height: 8px;
+    background: #eee;
+  }
+}
 </style>

plugins/common.js

@@ -14,6 +14,10 @@ Vue.mixin({
   components: {
     ProginnPage,
   },
+  data() {
+    return {
+    }
+  },
   computed: {
     userinfo() {
       return this.$store.state.userinfo

store/index.js

@@ -5,6 +5,7 @@ Vue.use(Vuex)
 const store = () => new Vuex.Store({
   state: {
     isPC: -1,
+    isWeixin: false,
     userinfo: {},
   },
   mutations: {
@@ -13,6 +14,9 @@ const store = () => new Vuex.Store({
     },
     updateIsPC(state, payload) {
       state.isPC = payload.isPC
+    },
+    updateIsWeixin(state, payload) {
+      state.isWeixin = payload.isWeixin
     }
   }
 })