qgb-process 0.2.3 → 0.2.7

package/src/components/public/components/Userinfo.vue

@@ -1,383 +1,383 @@
-<template>
-  <div class="topbar">
-    <div class="header font12">
-      <div class="page-left" :class="{'hover-area':areaBox}">
-        <div @mouseenter="showArea" @mouseleave="areaBoxHoverOut">
-          <div class="areaBox-shade" v-if="areaBox"></div>
-          <span class="area line-city">{{monitorId.shortName}}</span>
-          &nbsp;
-        </div>
-
-        <div class="areaBox" v-show="areaBox" @mouseenter="showArea" @mouseleave="areaBoxHoverOut">
-          <div class="tc-10"></div>
-          <div class="areaBoxInner">
-            <div v-for="(item,index) in data1" :key="index">
-              <a
-                @click="selectArea(item,index)"
-                :class="{'colorClass': colorClass = item.checked,'a-hover':!item.checked}"
-              >{{item.shortName}}</a>
-            </div>
-          </div>
-          <div class="tc-5 clearboth"></div>
-        </div>
-      </div>
-
-      <div class="page-left header-tel">
-        <span class="color66">客服电话：</span>
-        <span class="orange-color">400-001-0051</span>
-      </div>
-
-      <div class="cursor image1-hover page-left">
-        <div class="icon">
-          <img src="@/assets/public/phone.png" alt />
-        </div>
-        <div class="image1">
-          <div class="tc-10"></div>
-          <div class="image-box">
-            <img src="@/assets/public/think-change.png" alt />
-          </div>
-          <div class="image-font color02">手机版下载</div>
-          <div class="image-font">扫一扫，立即下载！</div>
-        </div>
-      </div>
-
-      <div class="cursor image2-hover page-left">
-        <div class="icon">
-          <img src="@/assets/public/weixin.png" alt />
-        </div>
-        <div class="image2">
-          <img src="@/assets/public/gzh_apple.jpg" alt />
-        </div>
-      </div>
-
-      <div class="right page-right normal">
-        <ul>
-          <li>
-            <span
-              class="color02 user cursor"
-              @click="$router.push({path:'/'})"
-            >您好！{{this.$store.state.user.accountName}}</span>
-            <span class="cursor color96" @click="quit">
-              &nbsp;&nbsp;
-              <span class="color66">|</span>&nbsp;&nbsp; 退出
-            </span>
-          </li>
-          <li class="cursor color66" @click="toIndex">首页</li>
-          <li class="cursor color66" @click="$router.push({path:'/'})">会员中心</li>
-          <li class="cursor color66 my-mess" @click="$router.push({path:'/myMessage'})">
-            我的消息
-            <div v-if="this.$store.state.user.msgNum>0"></div>
-          </li>
-          <li class="cursor color66" @click="$router.push({path:'/HelpCenter'})">帮助中心</li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import link from "@/public/link.js"
-import cookie from "@/storage/cookies"
-import localStorage from "@/storage/localStorage"
-export default {
-  name: "Userinfo",
-  data() {
-    return {
-      isShow: true,
-      areaBox: false,
-      colorClass: "",
-      data1: [],
-      shake: false
-    }
-  },
-  components: {},
-  inject: ["reload"],
-  methods: {
-    showArea() {
-      if (this.data1.length === 0) {
-        this.data1 = JSON.parse(localStorage.read("areaAll"))
-      }
-      this.areaBox = true
-      this.shake = true
-    },
-    areaBoxHoverOut() {
-      const that = this
-      this.shake = false
-      setTimeout(function() {
-        if (!that.shake) {
-          that.areaBox = false
-        }
-      }, 50)
-    },
-
-    selectArea(val, index) {
-      this.colorClass = index
-      this.data1.forEach(item => {
-        item.checked = false
-      })
-      val.checked = true
-      this.areaBox = false
-      cookie.cookieSet("area", JSON.stringify(val))
-      localStorage.set("areaAll", JSON.stringify(this.data1))
-      this.$store.commit("SET_AREA", val)
-      // this.$store.dispatch("SET_AREA");
-      this.reload() // 重载
-    },
-    quit() {
-      // LOGIN_OUT
-      this.$confirm("确认退出？", "提示", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      })
-        .then(res => {
-          this.$store.commit("LOGIN_OUT")
-        })
-        .catch(() => {})
-    },
-    toIndex() {
-      link.index()
-    }
-  },
-  watch: {},
-  computed: {
-    monitorId() {
-      const area = cookie.cookieRead("area")
-      const res = JSON.parse(area)
-      return res
-    }
-  },
-  mounted() {},
-  created() {
-    if (this.$store.state.loginType) {
-      this.isShow = false
-    }
-  }
-}
-</script>
-
-<style lang="scss" rel="stylesheet/scss" scoped>
-.orange-color {
-  color: #ff6600;
-}
-//
-$font_color: #737373;
-// width: 1200px;
-// @media screen and (max-width: 768px)
-// @media screen and (min-width: 768px)
-
-@media screen and (min-width: 1218px) {
-  .topbar {
-    .header {
-      width: 1200px;
-    }
-  }
-}
-@media screen and (max-width: 1217px) {
-  .topbar {
-    .header {
-      width: 100%;
-      > div:nth-child(1) {
-        margin: 0 0 0 20px;
-      }
-    }
-    .right {
-      margin-right: 20px;
-    }
-  }
-}
-@media screen and (max-width: 992px) {
-  .topbar {
-    .header {
-      width: 992px;
-    }
-  }
-}
-* {
-  padding: 0;
-  margin: 0;
-}
-.topbar {
-  background: #f5f5f5;
-  width: 100%;
-  height: 30px;
-  .hover-area {
-    padding: 0 !important;
-    border: 1px solid #e4e7ed;
-    border-bottom: none;
-    background: #fff;
-    height: 29px;
-    // line-height: 30px;
-  }
-
-  .header {
-    margin: 0 auto;
-    height: 30px;
-    line-height: 30px;
-    position: relative;
-    > div {
-      &:nth-child(1) {
-        padding: 1px 1px 0;
-        text-indent: 10px;
-        position: relative;
-        line-height: 29px;
-        .areaBox-shade {
-          position: absolute;
-          height: 5px;
-          z-index: 1000;
-          width: 100%;
-          background: #fff;
-          left: 0px;
-          bottom: -2px;
-        }
-      }
-    }
-    .header-inner {
-      margin-right: 25px !important;
-    }
-  }
-  .icon {
-    display: inline-block;
-    width: 40px;
-    height: 100%;
-    text-align: center;
-    &:hover {
-      background: #fff;
-    }
-    > img {
-      padding-top: 6px;
-    }
-  }
-  .header-tel {
-    margin-left: 20px;
-    margin-right: 20px;
-  }
-  .image1-hover:hover .image1 {
-    display: block;
-  }
-  .image2-hover:hover .image2 {
-    display: block;
-  }
-  .image1-hover,
-  .image2-hover {
-    position: relative;
-  }
-  .image2-hover {
-    margin-left: 5px;
-  }
-  .image1 {
-    line-height: 30px;
-    width: 162px;
-    height: 183px;
-    position: absolute;
-    bottom: -183px;
-    left: 0;
-    z-index: 100;
-    background: #fff;
-    text-align: center;
-    display: none;
-    .image-box {
-      margin: 0 auto;
-      width: 120px;
-      height: 120px;
-      > img {
-        width: 100%;
-        height: 100%;
-      }
-    }
-    .image-font {
-      height: 20px;
-    }
-  }
-  .image2 {
-    width: 120px;
-    height: 120px;
-    position: absolute;
-    bottom: -120px;
-    left: 0;
-    > img {
-      width: 100%;
-      height: 100%;
-    }
-    z-index: 100;
-    display: none;
-  }
-  .right {
-    ul {
-      li {
-        float: left;
-        margin-right: 30px;
-        position: relative;
-        &:last-child {
-          margin-right: 0;
-        }
-      }
-      .my-mess {
-        padding-right: 8px;
-        > div {
-          position: absolute;
-          width: 6px;
-          height: 6px;
-          background: rgba(253, 83, 83, 1);
-          border-radius: 50%;
-          right: 0px;
-          top: 8px;
-        }
-      }
-    }
-  }
-  .area {
-    background: url("../../../assets/public/locat.png") no-repeat left 6px;
-    text-indent: 20px;
-  }
-  .normal {
-    font-weight: normal;
-  }
-  .areaBox {
-    left: -1px;
-    top: 28px;
-    width: 318px;
-    min-height: 200px;
-    border: 1px solid #e4e7ed;
-    position: absolute;
-    background-color: #ffffff;
-    z-index: 999;
-    .areaBoxInner {
-      width: 300px;
-      margin: 0 auto;
-      > div {
-        margin-bottom: 3px;
-        width: 60px;
-        display: inline-block;
-        float: left;
-        height: 24px;
-        line-height: 24px;
-        a {
-          text-indent: 0px;
-          display: inline-block;
-          padding: 0 6px;
-          cursor: pointer;
-          outline: none;
-          color: #666666;
-        }
-        .a-hover {
-          &:hover {
-            background: #f5f5f5;
-            color: #0286df;
-          }
-        }
-      }
-    }
-  }
-
-  .colorClass {
-    background-color: #0286df;
-    color: #ffffff !important;
-  }
-
-  .line-city {
-    display: inline-block;
-    color: #0286df;
-    cursor: pointer;
-  }
-}
-</style>
+<template>
+  <div class="topbar">
+    <div class="header font12">
+      <div class="page-left" :class="{'hover-area':areaBox}">
+        <div @mouseenter="showArea" @mouseleave="areaBoxHoverOut">
+          <div class="areaBox-shade" v-if="areaBox"></div>
+          <span class="area line-city">{{monitorId.shortName}}</span>
+          &nbsp;
+        </div>
+
+        <div class="areaBox" v-show="areaBox" @mouseenter="showArea" @mouseleave="areaBoxHoverOut">
+          <div class="tc-10"></div>
+          <div class="areaBoxInner">
+            <div v-for="(item,index) in data1" :key="index">
+              <a
+                @click="selectArea(item,index)"
+                :class="{'colorClass': colorClass = item.checked,'a-hover':!item.checked}"
+              >{{item.shortName}}</a>
+            </div>
+          </div>
+          <div class="tc-5 clearboth"></div>
+        </div>
+      </div>
+
+      <div class="page-left header-tel">
+        <span class="color66">客服电话：</span>
+        <span class="orange-color">400-001-0051</span>
+      </div>
+
+      <div class="cursor image1-hover page-left">
+        <div class="icon">
+          <img src="@/assets/public/phone.png" alt />
+        </div>
+        <div class="image1">
+          <div class="tc-10"></div>
+          <div class="image-box">
+            <img src="@/assets/public/think-change.png" alt />
+          </div>
+          <div class="image-font color02">手机版下载</div>
+          <div class="image-font">扫一扫，立即下载！</div>
+        </div>
+      </div>
+
+      <div class="cursor image2-hover page-left">
+        <div class="icon">
+          <img src="@/assets/public/weixin.png" alt />
+        </div>
+        <div class="image2">
+          <img src="@/assets/public/gzh_apple.jpg" alt />
+        </div>
+      </div>
+
+      <div class="right page-right normal">
+        <ul>
+          <li>
+            <span
+              class="color02 user cursor"
+              @click="$router.push({path:'/'})"
+            >您好！{{this.$store.state.user.accountName}}</span>
+            <span class="cursor color96" @click="quit">
+              &nbsp;&nbsp;
+              <span class="color66">|</span>&nbsp;&nbsp; 退出
+            </span>
+          </li>
+          <li class="cursor color66" @click="toIndex">首页</li>
+          <li class="cursor color66" @click="$router.push({path:'/'})">会员中心</li>
+          <li class="cursor color66 my-mess" @click="$router.push({path:'/myMessage'})">
+            我的消息
+            <div v-if="this.$store.state.user.msgNum>0"></div>
+          </li>
+          <li class="cursor color66" @click="$router.push({path:'/HelpCenter'})">帮助中心</li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import link from "@/public/link.js"
+import cookie from "@/storage/cookies"
+import localStorage from "@/storage/localStorage"
+export default {
+  name: "Userinfo",
+  data() {
+    return {
+      isShow: true,
+      areaBox: false,
+      colorClass: "",
+      data1: [],
+      shake: false
+    }
+  },
+  components: {},
+  inject: ["reload"],
+  methods: {
+    showArea() {
+      if (this.data1.length === 0) {
+        this.data1 = JSON.parse(localStorage.read("areaAll"))
+      }
+      this.areaBox = true
+      this.shake = true
+    },
+    areaBoxHoverOut() {
+      const that = this
+      this.shake = false
+      setTimeout(function() {
+        if (!that.shake) {
+          that.areaBox = false
+        }
+      }, 50)
+    },
+
+    selectArea(val, index) {
+      this.colorClass = index
+      this.data1.forEach(item => {
+        item.checked = false
+      })
+      val.checked = true
+      this.areaBox = false
+      cookie.cookieSet("area", JSON.stringify(val))
+      localStorage.set("areaAll", JSON.stringify(this.data1))
+      this.$store.commit("SET_AREA", val)
+      // this.$store.dispatch("SET_AREA");
+      this.reload() // 重载
+    },
+    quit() {
+      // LOGIN_OUT
+      this.$confirm("确认退出？", "提示", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning"
+      })
+        .then(res => {
+          this.$store.commit("LOGIN_OUT")
+        })
+        .catch(() => {})
+    },
+    toIndex() {
+      link.index()
+    }
+  },
+  watch: {},
+  computed: {
+    monitorId() {
+      const area = cookie.cookieRead("area")
+      const res = JSON.parse(area)
+      return res
+    }
+  },
+  mounted() {},
+  created() {
+    if (this.$store.state.loginType) {
+      this.isShow = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" rel="stylesheet/scss" scoped>
+.orange-color {
+  color: #ff6600;
+}
+//
+$font_color: #737373;
+// width: 1200px;
+// @media screen and (max-width: 768px)
+// @media screen and (min-width: 768px)
+
+@media screen and (min-width: 1218px) {
+  .topbar {
+    .header {
+      width: 1200px;
+    }
+  }
+}
+@media screen and (max-width: 1217px) {
+  .topbar {
+    .header {
+      width: 100%;
+      > div:nth-child(1) {
+        margin: 0 0 0 20px;
+      }
+    }
+    .right {
+      margin-right: 20px;
+    }
+  }
+}
+@media screen and (max-width: 992px) {
+  .topbar {
+    .header {
+      width: 992px;
+    }
+  }
+}
+* {
+  padding: 0;
+  margin: 0;
+}
+.topbar {
+  background: #f5f5f5;
+  width: 100%;
+  height: 30px;
+  .hover-area {
+    padding: 0 !important;
+    border: 1px solid #e4e7ed;
+    border-bottom: none;
+    background: #fff;
+    height: 29px;
+    // line-height: 30px;
+  }
+
+  .header {
+    margin: 0 auto;
+    height: 30px;
+    line-height: 30px;
+    position: relative;
+    > div {
+      &:nth-child(1) {
+        padding: 1px 1px 0;
+        text-indent: 10px;
+        position: relative;
+        line-height: 29px;
+        .areaBox-shade {
+          position: absolute;
+          height: 5px;
+          z-index: 1000;
+          width: 100%;
+          background: #fff;
+          left: 0px;
+          bottom: -2px;
+        }
+      }
+    }
+    .header-inner {
+      margin-right: 25px !important;
+    }
+  }
+  .icon {
+    display: inline-block;
+    width: 40px;
+    height: 100%;
+    text-align: center;
+    &:hover {
+      background: #fff;
+    }
+    > img {
+      padding-top: 6px;
+    }
+  }
+  .header-tel {
+    margin-left: 20px;
+    margin-right: 20px;
+  }
+  .image1-hover:hover .image1 {
+    display: block;
+  }
+  .image2-hover:hover .image2 {
+    display: block;
+  }
+  .image1-hover,
+  .image2-hover {
+    position: relative;
+  }
+  .image2-hover {
+    margin-left: 5px;
+  }
+  .image1 {
+    line-height: 30px;
+    width: 162px;
+    height: 183px;
+    position: absolute;
+    bottom: -183px;
+    left: 0;
+    z-index: 100;
+    background: #fff;
+    text-align: center;
+    display: none;
+    .image-box {
+      margin: 0 auto;
+      width: 120px;
+      height: 120px;
+      > img {
+        width: 100%;
+        height: 100%;
+      }
+    }
+    .image-font {
+      height: 20px;
+    }
+  }
+  .image2 {
+    width: 120px;
+    height: 120px;
+    position: absolute;
+    bottom: -120px;
+    left: 0;
+    > img {
+      width: 100%;
+      height: 100%;
+    }
+    z-index: 100;
+    display: none;
+  }
+  .right {
+    ul {
+      li {
+        float: left;
+        margin-right: 30px;
+        position: relative;
+        &:last-child {
+          margin-right: 0;
+        }
+      }
+      .my-mess {
+        padding-right: 8px;
+        > div {
+          position: absolute;
+          width: 6px;
+          height: 6px;
+          background: rgba(253, 83, 83, 1);
+          border-radius: 50%;
+          right: 0px;
+          top: 8px;
+        }
+      }
+    }
+  }
+  .area {
+    background: url("../../../assets/public/locat.png") no-repeat left 6px;
+    text-indent: 20px;
+  }
+  .normal {
+    font-weight: normal;
+  }
+  .areaBox {
+    left: -1px;
+    top: 28px;
+    width: 318px;
+    min-height: 200px;
+    border: 1px solid #e4e7ed;
+    position: absolute;
+    background-color: #ffffff;
+    z-index: 999;
+    .areaBoxInner {
+      width: 300px;
+      margin: 0 auto;
+      > div {
+        margin-bottom: 3px;
+        width: 60px;
+        display: inline-block;
+        float: left;
+        height: 24px;
+        line-height: 24px;
+        a {
+          text-indent: 0px;
+          display: inline-block;
+          padding: 0 6px;
+          cursor: pointer;
+          outline: none;
+          color: #666666;
+        }
+        .a-hover {
+          &:hover {
+            background: #f5f5f5;
+            color: #0286df;
+          }
+        }
+      }
+    }
+  }
+
+  .colorClass {
+    background-color: #0286df;
+    color: #ffffff !important;
+  }
+
+  .line-city {
+    display: inline-block;
+    color: #0286df;
+    cursor: pointer;
+  }
+}
+</style>