qj-common 4.3.0 → 4.3.2

package/src/views/layout/theme/darkBlue/components/LeftNavbar.vue

@@ -1,466 +1,466 @@
-<template>
-  <div
-    :class="{'is-active':sidebar.appNavOpen}"
-    class="el-menu-vertical-demo"
-    :style="{height:height+'px'}"
-  >
-    <!-- <div class="top-logo">
-        <img src="../assets/logo.png">
-    </div>-->
-    <div class="tool-menu-svg">
-      <a class="header-container">
-        <div class="header-img">
-          <i class="user-icon"></i>
-        </div>
-        <span>{{$store.state.user.name}}</span>
-      </a>
-      <a class="my-youfu">{{memberName}}</a>
-    </div>
-    <div class="el-container-box">
-      <div class="el-menu-box">
-        <ul
-          class="el-menu-ul"
-          v-for="(item,index) in userLeftRouter.list"
-          :key="index"
-          v-if="!item.menuTarget"
-        >
-          <li
-            class="active"
-            v-for="(itemChild,indexChild) in (item.children ? item.children : [])"
-            :key="indexChild"
-          >
-            <a class="active" @click="menuLi($event)">
-              <i
-                class="iconfont"
-                :class="itemChild.proappMenuRemark ? itemChild.proappMenuRemark :'icon-caidan-shi'"
-              ></i>
-              {{itemChild.menuName}}
-            </a>
-            <ol v-if="itemChild.children!==null">
-              <li
-                v-for="(itemOl,indexOl) in itemChild.children"
-                :key="indexOl"
-                :class="[$route.path == '/'+itemOl.menuAction ? 'active':'',itemOl.menuAction]"
-                v-if=" !itemOl.menuTarget"
-              >
-                <div class="el-li-title">
-                  <a @click="menuHref(item.menuAction,itemOl,2)">
-                    <em></em>
-                    <span></span>
-                    {{itemOl.menuName}}
-                  </a>
-                  <i
-                    v-if="itemOl.children!==null"
-                    :class="[iconStatic? 'el-icon-minus':'el-icon-plus', 'el-icon']"
-                    @click="menuIcon($event)"
-                  ></i>
-                </div>
-                <dl v-if="itemOl.children!==null" class="el-dl-list-box">
-                  <dd
-                    v-for="(itemDd,indexDd) in itemOl.children"
-                    :key="indexDd"
-                    :class="[$route.path.split('/')[2] == itemDd.menuAction ? 'is-active3':'']"
-                    v-if=" !itemDd.menuTarget"
-                  >
-                    <a
-                      class="el-dd-list"
-                      @click="menuHref(item.menuAction,itemDd,3)"
-                    >{{itemDd.menuName}}</a>
-                  </dd>
-                </dl>
-              </li>
-            </ol>
-          </li>
-        </ul>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapGetters } from "vuex";
-
-export default {
-  data() {
-    return {
-      appActive: process.env.APP_PATH, // 当前点击的项目名称
-      height: document.documentElement.clientHeight - 85,
-      heightBox: document.documentElement.clientHeight - 355,
-      isCollapse: true,
-      iconStatic: false,
-      memberName: "会员中心", //会员中心账户名
-      userLeftRouter: []
-    };
-  },
-  beforeMounted() {
-    console.log(this.appList, "appListappList");
-    this.appList.forEach(el => {
-      if (el.menuDefaultClass === "user") {
-        this.memberName = el.menuName ? el.menuName : "会员中心";
-        let memberRouter = el.children ? el.children : [];
-        memberRouter.forEach(item => {
-          this.userLeftRouter =
-            item.menuDefaultClass === "userLeftRouter" && item.children
-              ? item.children
-              : [];
-        });
-      }
-    });
-  },
-  mounted() {
-    window.addEventListener("resize", this.heightChange);
-    //先判断是几级菜单，现在的是二级菜单
-    if (document.querySelector(".active")) {
-      //表示二级菜单
-      document.querySelector(".active").parentNode.parentNode.className =
-        "active";
-    } else if (document.querySelector(".is-active3")) {
-      //三级菜单
-      let obj = document.querySelector(".is-active3");
-      console.log(obj, "obj");
-      this.iconStatic = true;
-      obj.parentNode.parentNode.childNodes[0].classList.add("active");
-      obj.parentNode.parentNode.parentNode.parentNode.childNodes[0].classList.add(
-        "active"
-      );
-      obj.className = "active";
-    }
-  },
-  computed: {
-    ...mapGetters(["appList", "sidebar"])
-  },
-  watch: {},
-  methods: {
-    // toggle(index) {
-    //   this.checkindex = index;
-    // },
-    menuLi(e) {
-      //点击显示二级菜单
-      //点击添加class
-      e.target.classList.toggle("active");
-    },
-    menuIcon(e) {
-      //点击显示三级菜单
-      e.target.parentNode.classList.toggle("active");
-      if (e.target.className.indexOf("el-icon-plus") >= 0) {
-        e.target.classList.remove("el-icon-plus");
-        e.target.classList.add("el-icon-minus");
-      } else {
-        e.target.classList.remove("el-icon-minus");
-        e.target.classList.add("el-icon-plus");
-      }
-    },
-    handleSelect(key, keyPath) {
-      if (!key) {
-        return;
-      }
-      var url = "";
-      this.appList.list.forEach(item => {
-        if (item.menuJspath === key) {
-          url = item.menuAction;
-        }
-      });
-      window.location.href = url;
-      console.log(key, keyPath);
-    },
-    handleOpen(key, keyPath) {
-      console.log(key, keyPath);
-    },
-    handleClose(key, keyPath) {
-      console.log(key, keyPath);
-    },
-    heightChange() {
-      this.height = document.documentElement.clientHeight - 58 - 40;
-    },
-    menuHref(menuAction, item, index) {
-      let path =
-        index === 2
-          ? "/" + item.menuAction
-          : "/" + item.proappMenuPcode + "/" + item.menuAction;
-      // index===2 是二级菜单，3是三级菜单
-      if (item.children === null) {
-        //可跳转
-        if (location.href.indexOf("localhost") >= 0) {
-          //localhost表示本地跳转
-
-          this.$router.push({
-            path: path
-          });
-
-          this.$store.commit("MENUTITLE", item.menuName);
-        } else {
-          if (location.href.indexOf(menuAction) >= 0) {
-            //表示线上同源下跳转
-            this.$router.push({
-              path: path
-            });
-            this.$store.commit("MENUTITLE", item.menuName);
-          } else {
-            location.href = menuAction + "#" + path;
-          }
-        }
-      }
-    }
-  }
-};
-</script>
-
-<style rel="stylesheet" scoped>
-.el-menu-ul ol {
-  display: none;
-  margin-left: 7px;
-  /* transition: all 0.5s cubic-bezier(0, 1, 0.5, 1);
-  transform: translateY(0); */
-}
-.el-menu-ul li ol li.active .el-dl-list-box,
-.el-menu-ul ol.active,
-.el-menu-ul li a.active + ol {
-  display: block;
-}
-
-.el-menu-ul .active ol,
-.el-menu-ul .active + ol {
-  display: block;
-}
-
-.el-menu-vertical-demo {
-  width: 196px;
-  margin-top: 12px;
-}
-.user-icon {
-  display: block;
-  height: 80px;
-  overflow: hidden;
-  background: url("../../../../../assets/nav/admin.png") center no-repeat;
-}
-.top-logo {
-  height: 120px;
-  line-height: 120px;
-  text-align: center;
-  margin-bottom: 2px;
-  background: #fff;
-}
-.top-logo img {
-  height: 70px;
-}
-.el-menu-vertical-demo {
-  background: none;
-}
-.el-menu-vertical-demo.is-active {
-  width: 50px;
-}
-.el-menu-vertical {
-  width: 100%;
-  height: 100%;
-  border-right: none;
-}
-
-.el-menu-item:hover,
-.el-menu-item:hover a,
-.el-menu-item:hover a i {
-  background: #f1f8ff !important;
-}
-.el-menu-item.is-active,
-.el-menu-item.is-active a,
-.el-menu-item.is-active a i {
-  background: #f1f8ff !important;
-}
-
-.header-img {
-  display: inline-block;
-  width: 80px;
-  height: 80px;
-  border-radius: 50%;
-  background: #eee;
-  margin: 20px 0 0px;
-  text-align: center;
-}
-.header-container {
-  display: block;
-}
-.header-container span {
-  display: block;
-  color: #666;
-  line-height: 30px;
-}
-.el-submenu .el-menu-item {
-  min-width: 196px;
-}
-.tool-menu-svg {
-  font-size: 14px;
-  width: 196px;
-  /*height: 150px;*/
-  text-align: center;
-  /*position: absolute;*/
-  z-index: 12;
-  background: #fff;
-  border-bottom: solid 1px #eee;
-  padding-bottom: 10px;
-  /* box-shadow: -5px 2px 10px 0 #333; */
-}
-.my-youfu {
-  display: block;
-  height: 50px;
-  line-height: 50px;
-  background: #f1f8ff;
-  color: #2171d2;
-  margin-top: 30px;
-  position: relative;
-}
-.my-youfu:after {
-  content: "";
-  display: block;
-  width: 4px;
-  background: #2171d2;
-  position: absolute;
-  right: -4px;
-  height: 100%;
-  top: 0;
-}
-.app-scroll-container {
-  /*    margin-top: 72px;
-        padding-bottom: 72px;*/
-  margin-top: 60px;
-}
-.app-scroll-container.scroll-container {
-  background: #fff;
-}
-.el-menu-custom {
-  margin-left: 34px;
-  width: 140px;
-}
-.el-menu-list {
-  /* border-top: 1px solid #666; */
-  min-width: 160px !important;
-  border-left: 1px solid #999;
-  padding: 0px !important;
-}
-.el-menu-ul a {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.el-menu-list i {
-  width: 20px;
-  height: 1px;
-  background: #999;
-  display: inline-block;
-}
-.el-menu-list span {
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: #999;
-  margin-right: 6px;
-}
-
-.el-menu-ul {
-  margin: 0px 15px;
-  width: 166px;
-  font-size: 14px;
-  line-height: 42px;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-.el-dl-list-box {
-  display: none;
-}
-.el-dl-list-box a {
-  display: block;
-}
-.el-menu-ul ol li {
-  position: relative;
-}
-.el-menu-ul ol li:last-child .el-dl-list-box a::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  background: #999;
-  width: 1px;
-  z-index: 10;
-  height: 0px;
-}
-.el-dl-list-box a::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  background: #999;
-  width: 1px;
-  z-index: 10;
-  height: 44px;
-}
-
-.el-menu-ul ol li::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  background: #999;
-  width: 1px;
-  z-index: 10;
-  height: 44px;
-}
-.el-menu-ul ol li:last-child::before {
-  content: "";
-  position: absolute;
-  left: 0;
-  background: #999;
-  width: 1px;
-  z-index: 10;
-  height: 23px;
-}
-.el-menu-ul i {
-  font-size: 16px;
-  margin-right: 5px;
-  display: inline-block;
-}
-.el-menu-box a {
-  color: #666;
-}
-.el-menu-box {
-  position: relative;
-}
-.el-menu-box ~ .el-menu-box {
-  /* border-top: 1px solid #eee; */
-  margin-top: 20px;
-}
-.el-container-box {
-  background: #fff;
-  /*margin-top: 150px;*/
-  overflow-x: hidden;
-  overflow-y: auto;
-}
-
-.el-li-title span {
-  display: inline-block;
-  width: 6px;
-  height: 6px;
-  border-radius: 50%;
-  background: #999;
-  margin-right: 6px;
-}
-.el-li-title.active + dl {
-  display: block;
-}
-.el-li-title em {
-  width: 15px;
-  height: 1px;
-  background: #999;
-  display: inline-block;
-  vertical-align: middle;
-}
-.el-dd-list {
-  display: block;
-  font-size: 12px;
-  color: #999;
-  padding-left: 45px;
-}
-.el-li-title i.el-icon {
-  font-size: 12px;
-  margin-left: 5px;
-  cursor: pointer;
-}
-</style>
-
+<template>
+  <div
+    :class="{'is-active':sidebar.appNavOpen}"
+    class="el-menu-vertical-demo"
+    :style="{height:height+'px'}"
+  >
+    <!-- <div class="top-logo">
+        <img src="../assets/logo.png">
+    </div>-->
+    <div class="tool-menu-svg">
+      <a class="header-container">
+        <div class="header-img">
+          <i class="user-icon"></i>
+        </div>
+        <span>{{$store.state.user.name}}</span>
+      </a>
+      <a class="my-youfu">{{memberName}}</a>
+    </div>
+    <div class="el-container-box">
+      <div class="el-menu-box">
+        <ul
+          class="el-menu-ul"
+          v-for="(item,index) in userLeftRouter.list"
+          :key="index"
+          v-if="!item.menuTarget"
+        >
+          <li
+            class="active"
+            v-for="(itemChild,indexChild) in (item.children ? item.children : [])"
+            :key="indexChild"
+          >
+            <a class="active" @click="menuLi($event)">
+              <i
+                class="iconfont"
+                :class="itemChild.proappMenuRemark ? itemChild.proappMenuRemark :'icon-caidan-shi'"
+              ></i>
+              {{itemChild.menuName}}
+            </a>
+            <ol v-if="itemChild.children!==null">
+              <li
+                v-for="(itemOl,indexOl) in itemChild.children"
+                :key="indexOl"
+                :class="[$route.path == '/'+itemOl.menuAction ? 'active':'',itemOl.menuAction]"
+                v-if=" !itemOl.menuTarget"
+              >
+                <div class="el-li-title">
+                  <a @click="menuHref(item.menuAction,itemOl,2)">
+                    <em></em>
+                    <span></span>
+                    {{itemOl.menuName}}
+                  </a>
+                  <i
+                    v-if="itemOl.children!==null"
+                    :class="[iconStatic? 'el-icon-minus':'el-icon-plus', 'el-icon']"
+                    @click="menuIcon($event)"
+                  ></i>
+                </div>
+                <dl v-if="itemOl.children!==null" class="el-dl-list-box">
+                  <dd
+                    v-for="(itemDd,indexDd) in itemOl.children"
+                    :key="indexDd"
+                    :class="[$route.path.split('/')[2] == itemDd.menuAction ? 'is-active3':'']"
+                    v-if=" !itemDd.menuTarget"
+                  >
+                    <a
+                      class="el-dd-list"
+                      @click="menuHref(item.menuAction,itemDd,3)"
+                    >{{itemDd.menuName}}</a>
+                  </dd>
+                </dl>
+              </li>
+            </ol>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+
+export default {
+  data() {
+    return {
+      appActive: process.env.APP_PATH, // 当前点击的项目名称
+      height: document.documentElement.clientHeight - 85,
+      heightBox: document.documentElement.clientHeight - 355,
+      isCollapse: true,
+      iconStatic: false,
+      memberName: "会员中心", //会员中心账户名
+      userLeftRouter: []
+    };
+  },
+  beforeMounted() {
+    console.log(this.appList, "appListappList");
+    this.appList.forEach(el => {
+      if (el.menuDefaultClass === "user") {
+        this.memberName = el.menuName ? el.menuName : "会员中心";
+        let memberRouter = el.children ? el.children : [];
+        memberRouter.forEach(item => {
+          this.userLeftRouter =
+            item.menuDefaultClass === "userLeftRouter" && item.children
+              ? item.children
+              : [];
+        });
+      }
+    });
+  },
+  mounted() {
+    window.addEventListener("resize", this.heightChange);
+    //先判断是几级菜单，现在的是二级菜单
+    if (document.querySelector(".active")) {
+      //表示二级菜单
+      document.querySelector(".active").parentNode.parentNode.className =
+        "active";
+    } else if (document.querySelector(".is-active3")) {
+      //三级菜单
+      let obj = document.querySelector(".is-active3");
+      console.log(obj, "obj");
+      this.iconStatic = true;
+      obj.parentNode.parentNode.childNodes[0].classList.add("active");
+      obj.parentNode.parentNode.parentNode.parentNode.childNodes[0].classList.add(
+        "active"
+      );
+      obj.className = "active";
+    }
+  },
+  computed: {
+    ...mapGetters(["appList", "sidebar"])
+  },
+  watch: {},
+  methods: {
+    // toggle(index) {
+    //   this.checkindex = index;
+    // },
+    menuLi(e) {
+      //点击显示二级菜单
+      //点击添加class
+      e.target.classList.toggle("active");
+    },
+    menuIcon(e) {
+      //点击显示三级菜单
+      e.target.parentNode.classList.toggle("active");
+      if (e.target.className.indexOf("el-icon-plus") >= 0) {
+        e.target.classList.remove("el-icon-plus");
+        e.target.classList.add("el-icon-minus");
+      } else {
+        e.target.classList.remove("el-icon-minus");
+        e.target.classList.add("el-icon-plus");
+      }
+    },
+    handleSelect(key, keyPath) {
+      if (!key) {
+        return;
+      }
+      var url = "";
+      this.appList.list.forEach(item => {
+        if (item.menuJspath === key) {
+          url = item.menuAction;
+        }
+      });
+      window.location.href = url;
+      console.log(key, keyPath);
+    },
+    handleOpen(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    handleClose(key, keyPath) {
+      console.log(key, keyPath);
+    },
+    heightChange() {
+      this.height = document.documentElement.clientHeight - 58 - 40;
+    },
+    menuHref(menuAction, item, index) {
+      let path =
+        index === 2
+          ? "/" + item.menuAction
+          : "/" + item.proappMenuPcode + "/" + item.menuAction;
+      // index===2 是二级菜单，3是三级菜单
+      if (item.children === null) {
+        //可跳转
+        if (location.href.indexOf("localhost") >= 0) {
+          //localhost表示本地跳转
+
+          this.$router.push({
+            path: path
+          });
+
+          this.$store.commit("MENUTITLE", item.menuName);
+        } else {
+          if (location.href.indexOf(menuAction) >= 0) {
+            //表示线上同源下跳转
+            this.$router.push({
+              path: path
+            });
+            this.$store.commit("MENUTITLE", item.menuName);
+          } else {
+            location.href = menuAction + "#" + path;
+          }
+        }
+      }
+    }
+  }
+};
+</script>
+
+<style rel="stylesheet" scoped>
+.el-menu-ul ol {
+  display: none;
+  margin-left: 7px;
+  /* transition: all 0.5s cubic-bezier(0, 1, 0.5, 1);
+  transform: translateY(0); */
+}
+.el-menu-ul li ol li.active .el-dl-list-box,
+.el-menu-ul ol.active,
+.el-menu-ul li a.active + ol {
+  display: block;
+}
+
+.el-menu-ul .active ol,
+.el-menu-ul .active + ol {
+  display: block;
+}
+
+.el-menu-vertical-demo {
+  width: 196px;
+  margin-top: 12px;
+}
+.user-icon {
+  display: block;
+  height: 80px;
+  overflow: hidden;
+  background: url("../../../../../assets/nav/admin.png") center no-repeat;
+}
+.top-logo {
+  height: 120px;
+  line-height: 120px;
+  text-align: center;
+  margin-bottom: 2px;
+  background: #fff;
+}
+.top-logo img {
+  height: 70px;
+}
+.el-menu-vertical-demo {
+  background: none;
+}
+.el-menu-vertical-demo.is-active {
+  width: 50px;
+}
+.el-menu-vertical {
+  width: 100%;
+  height: 100%;
+  border-right: none;
+}
+
+.el-menu-item:hover,
+.el-menu-item:hover a,
+.el-menu-item:hover a i {
+  background: #f1f8ff !important;
+}
+.el-menu-item.is-active,
+.el-menu-item.is-active a,
+.el-menu-item.is-active a i {
+  background: #f1f8ff !important;
+}
+
+.header-img {
+  display: inline-block;
+  width: 80px;
+  height: 80px;
+  border-radius: 50%;
+  background: #eee;
+  margin: 20px 0 0px;
+  text-align: center;
+}
+.header-container {
+  display: block;
+}
+.header-container span {
+  display: block;
+  color: #666;
+  line-height: 30px;
+}
+.el-submenu .el-menu-item {
+  min-width: 196px;
+}
+.tool-menu-svg {
+  font-size: 14px;
+  width: 196px;
+  /*height: 150px;*/
+  text-align: center;
+  /*position: absolute;*/
+  z-index: 12;
+  background: #fff;
+  border-bottom: solid 1px #eee;
+  padding-bottom: 10px;
+  /* box-shadow: -5px 2px 10px 0 #333; */
+}
+.my-youfu {
+  display: block;
+  height: 50px;
+  line-height: 50px;
+  background: #f1f8ff;
+  color: #2171d2;
+  margin-top: 30px;
+  position: relative;
+}
+.my-youfu:after {
+  content: "";
+  display: block;
+  width: 4px;
+  background: #2171d2;
+  position: absolute;
+  right: -4px;
+  height: 100%;
+  top: 0;
+}
+.app-scroll-container {
+  /*    margin-top: 72px;
+        padding-bottom: 72px;*/
+  margin-top: 60px;
+}
+.app-scroll-container.scroll-container {
+  background: #fff;
+}
+.el-menu-custom {
+  margin-left: 34px;
+  width: 140px;
+}
+.el-menu-list {
+  /* border-top: 1px solid #666; */
+  min-width: 160px !important;
+  border-left: 1px solid #999;
+  padding: 0px !important;
+}
+.el-menu-ul a {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.el-menu-list i {
+  width: 20px;
+  height: 1px;
+  background: #999;
+  display: inline-block;
+}
+.el-menu-list span {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #999;
+  margin-right: 6px;
+}
+
+.el-menu-ul {
+  margin: 0px 15px;
+  width: 166px;
+  font-size: 14px;
+  line-height: 42px;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.el-dl-list-box {
+  display: none;
+}
+.el-dl-list-box a {
+  display: block;
+}
+.el-menu-ul ol li {
+  position: relative;
+}
+.el-menu-ul ol li:last-child .el-dl-list-box a::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  background: #999;
+  width: 1px;
+  z-index: 10;
+  height: 0px;
+}
+.el-dl-list-box a::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  background: #999;
+  width: 1px;
+  z-index: 10;
+  height: 44px;
+}
+
+.el-menu-ul ol li::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  background: #999;
+  width: 1px;
+  z-index: 10;
+  height: 44px;
+}
+.el-menu-ul ol li:last-child::before {
+  content: "";
+  position: absolute;
+  left: 0;
+  background: #999;
+  width: 1px;
+  z-index: 10;
+  height: 23px;
+}
+.el-menu-ul i {
+  font-size: 16px;
+  margin-right: 5px;
+  display: inline-block;
+}
+.el-menu-box a {
+  color: #666;
+}
+.el-menu-box {
+  position: relative;
+}
+.el-menu-box ~ .el-menu-box {
+  /* border-top: 1px solid #eee; */
+  margin-top: 20px;
+}
+.el-container-box {
+  background: #fff;
+  /*margin-top: 150px;*/
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.el-li-title span {
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #999;
+  margin-right: 6px;
+}
+.el-li-title.active + dl {
+  display: block;
+}
+.el-li-title em {
+  width: 15px;
+  height: 1px;
+  background: #999;
+  display: inline-block;
+  vertical-align: middle;
+}
+.el-dd-list {
+  display: block;
+  font-size: 12px;
+  color: #999;
+  padding-left: 45px;
+}
+.el-li-title i.el-icon {
+  font-size: 12px;
+  margin-left: 5px;
+  cursor: pointer;
+}
+</style>
+