个人中心顶部颜色

components/header.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="proginn-header">
+  <div id="proginn-header" :class="{transparent: transparent}">
     <div class="list">
       <a href="/" class="nav-item">
         <img class="logo" src="https://stacdn.proginn.com/image/common/logo3@2x.png">
@@ -24,7 +24,7 @@
       </div>
       <template v-if="userinfo.icon_url">
         <el-dropdown class="nav-dropdown">
-          <el-button type="text" style="color: #515151;font-size: 15px;">
+          <el-button type="text" class="dashboard-title" :class="">
             <i class="el-icon-tickets"></i>工作台
           </el-button>
           <el-dropdown-menu slot="dropdown">
@@ -51,7 +51,7 @@
           </el-dropdown-menu>
         </el-dropdown>
         <el-dropdown class="nav-dropdown">
-          <el-button type="text" class="message-box" style="color: #515151;font-size: 15px;">
+          <el-button type="text" class="message-box-title">
             <i class="el-icon-message"></i>消息
             <span
               v-if="messageCount.total > 0"
@@ -157,6 +157,7 @@
 
 <script>
 export default {
+  props: ['transparent'],
   data() {
     return {
       // 搜索的关键词
@@ -415,4 +416,19 @@ span.other-icon {
 #proginn-header a {
   text-decoration: none !important;
 }
+#proginn-header.transparent {
+  background: transparent;
+}
+#proginn-header.transparent a {
+  color: white;
+}
+.message-box-title, .dashboard-title {
+  color: #515151;font-size: 15px;
+}
+#proginn-header.transparent .message-box-title, #proginn-header.transparent .dashboard-title {
+  color: white;
+}
+#proginn-header.transparent .nickname {
+  color: white;
+}
 </style>

layouts/opacity_header.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="container">
+    <proginn-header v-if="isPC != -1 && isPC" transparent="true"/>
+    <wx-header v-if="isWeixin"></wx-header>
+    <nuxt class="main"/>
+    <proginn-footer v-if="isPC != -1 && isPC"/>
+  </div>
+</template>
+
+<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,
+    WxHeader,
+  },
+  computed: {
+    ...mapState(['isPC', `isWeixin`]),
+  },
+  mounted() {
+    this.checkTerminal()
+    window.addEventListener('resize', this.checkInnerWidth)
+  },
+  methods: {
+    ...mapMutations(['updateIsPC', 'updateIsWeixin']),
+    checkTerminal() {
+      this.updateIsPC({
+        isPC: window.innerWidth > 960,
+      })
+      this.updateIsWeixin({
+        isWeixin: window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i)
+      })
+    },
+  }
+}
+</script>
+
+
+<style>
+*,
+*:before,
+*:after {
+  box-sizing: border-box;
+  margin: 0;
+}
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.main {
+  min-width: 1000px;
+  min-height: calc(100vh - 376px);
+  margin: 20px 0 30px;
+}
+</style>

pages/community/u/_id.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="community-u-box">
+
+  </div>
+</template>
+
+<script>
+import WxMixin from '@/mixins/wx'
+
+let page = 1
+
+export default {
+  layout: 'opacity_header',
+  data() {
+    return {
+      title: '开发者资质认证- 程序员客栈',
+      list: [],
+    }
+  },
+  head() {
+    return {
+      title: this.title,
+      script: [
+        { src: 'https://res.wx.qq.com/open/js/jweixin-1.2.0.js' },
+      ],
+    }
+  },
+  mixins: [WxMixin],
+  mounted() {
+    this.getList()
+  },
+  methods: {
+    clickLancer({ id }) {
+      this.$router.push(`/cert/type/${id}`)
+    },
+    btnDisabled(item) {
+      return item.btn_name !== "申请认证" || !item.can_click
+    },
+    async getList() {
+      let res = await this.$post('/api/cert/getList', { page }, { neverLogout: true })
+      if(res.status) {
+        let list = res.data.list
+        this.list = list
+      }
+    },
+    canApply(item) {
+      return item.end_date && item.is_cert_validate && item.cert_no
+    },
+    configWx() {
+      try {
+        let conf = this.$store.state.wxConfig
+        wx.ready(function() {   //需在用户可能点击分享按钮前就先调用
+          wx.config({
+            debug: true,
+            appId: conf.appId,
+            timestamp: conf.timestamp,
+            nonceStr: conf.nonceStr,
+            signature: conf.signature,
+            jsApiList: [
+              // 所有要调用的 API 都要加到这个列表中
+              'onMenuShareTimeline',       // 分享到朋友圈接口
+              'onMenuShareAppMessage',  //  分享到朋友接口
+              'onMenuShareQQ',         // 分享到QQ接口
+              'onMenuShareWeibo'      // 分享到微博接口
+            ],
+            success: function() {
+              alert('wx.config ok');
+            },
+            error: function(d) {
+              alert('wx.config err:' + JSON.stringify(d));
+            }
+          })
+          wx.updateAppMessageShareData({
+            title: '开发者资质认证', // 分享标题
+            desc: '通过平台审核、认证，将获得更多接单机会', // 分享描述
+            link: location.href, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
+            imgUrl: 'https://stacdn.proginn.com/favicon.ico', // 分享图标
+            success: function() {
+              // 设置成功
+              alert('微信图标设置成功')
+            }
+          })
+        })
+      } catch(error) {
+        alert(error)
+      }
+    }
+  }
+}
+</script>
+
+<style>
+body {
+  background: url(~@/assets/img/community/u_background.png) 0 0 / 100% auto no-repeat;
+}
+.community-u {
+
+}
+</style>