no message

src/components/Shortcut/index.vue

@@ -4,6 +4,26 @@
       <i class="el-icon-message-solid" style="font-size: 24px; line-height: 50px" />
       <el-badge v-if='allUnreadNum > 0' class="mark" :value="allUnreadNum" />
     </div> -->
+    <el-dropdown class="user-container yidong">
+      <div class="user right-menu-item hover-effect">
+        <span>移动端</span>
+      </div>
+      <el-dropdown-menu slot="dropdown" class="user-dropdown">
+        <el-dropdown-item disabled v-for="(item, index) in QRcodeList" :key="index">
+          <div class="QRcode">
+            <el-image class="QRcode-img" :src="item.codeUrl" :preview-src-list="[item.codeUrl]" fit="fill"></el-image>
+            <div>
+              <div>{{ item.name }}</div>
+              <div class="liveTitle">{{ item.saleName }}</div>
+              <div>
+                <el-image v-if="item.iosIcon" class="shouji-icon" :src="item.iosIcon" fit="fill"></el-image>
+                <el-image v-if="item.androidIcon" class="shouji-icon" :src="item.androidIcon" fit="fill"></el-image>
+              </div>
+            </div>
+          </div>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </el-dropdown>
     <el-drawer size="450px" :with-header="false" :show-close="false" :visible.sync="drawer" direction="rtl"
       :modal="false">
       <div class="drawer">
@@ -21,7 +41,8 @@
               <el-button :type="pam.read_flag == '' ? 'primary' : null" size="mini" @click="hadleRead(0)">全部</el-button>
               <el-button :type="pam.read_flag == 'NO' ? 'primary' : null" size="mini" @click="hadleRead(1)">未读</el-button>
               <el-badge :value="allUnreadNum" class="item" />
-              <el-button :type="pam.read_flag == 'YES' ? 'primary' : null" size="mini" @click="hadleRead(2)">已读</el-button>
+              <el-button :type="pam.read_flag == 'YES' ? 'primary' : null" size="mini"
+                @click="hadleRead(2)">已读</el-button>
             </div>
             <el-tabs v-model="pam.type" @tab-click="handleClick">
               <el-tab-pane label="通知" name="N"></el-tab-pane>
@@ -76,12 +97,19 @@ export default {
       total: 0,
       pam: {
         type: "N",
-        read_flag:"",
+        read_flag: "",
         pageNum: 1,
         pageSize: 20,
       },
       dialogVisible: false,
       showRow: {},
+      QRcodeList: [{
+        codeUrl: "https://fw.gd-jxm.com/gateway/pcapi/img/get?key=2023-10/16976800457215fe3d109-e0ae-485d-8b23-8e16d36885e9.jpg",
+        name: "aaaaa",
+        saleName: "",
+        iosIcon: "https://fw.gd-jxm.com/gateway/pcapi/img/get?key=2023-10/16976801488369080b52c-a1e6-40a0-83f9-8e04f12b494e.jpg",
+        androidIcon: "https://fw.gd-jxm.com/gateway/pcapi/img/get?key=2023-10/1697680143828d678a6e5-307d-47d0-8ee9-1698f100feb4.jpg"
+      }]
     }
   },
   computed: {
@@ -90,17 +118,17 @@ export default {
   mounted() {
     EventBus.$on('opendomview', this.opendomview)
     EventBus.$on('handleDrawerabcde', this.handleDrawer)
-    var this_ = this 
-    if(this.timeId){
+    var this_ = this
+    if (this.timeId) {
       clearTimeout(this.timeId)
     }
-    (function dingshiqingqiu (){
+    (function dingshiqingqiu() {
       this_.updateUnreadNotice()
       this_.timeId = setTimeout(dingshiqingqiu, 2000);
     })()
   },
-  beforeDestroy(){
-    if(this.timeId){
+  beforeDestroy() {
+    if (this.timeId) {
       clearTimeout(this.timeId)
     }
   },
@@ -119,7 +147,7 @@ export default {
     ...mapActions({
       updateUnreadNotice: 'app/getUnreadNum'
     }),
-    handleClick(val){
+    handleClick(val) {
       console.log(val)
     },
     opendomview(row) {
@@ -456,7 +484,8 @@ export default {
     white-space: nowrap;
     font-size: 16px;
     flex-wrap: 500;
-    .item-time{
+
+    .item-time {
       font-size: 12px;
       color: #aaa;
       margin-top: 5px;
@@ -468,4 +497,302 @@ export default {
     background: #e8fffb;
   }
 }
-</style>
+
+
+
+
+ul {
+  list-style: none;
+  padding: 0;
+  line-height: 20px;
+
+  li {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+}
+
+.right-menu {
+  height: 100%;
+  line-height: 50px;
+
+  &>div {
+    float: left;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  .user-container {
+    height: 50px;
+
+    .user {
+      i {
+        font-size: 18px;
+        margin-right: 5px;
+      }
+
+      span {
+        font-size: 16px;
+      }
+    }
+  }
+
+  .right-menu-item {
+    display: inline-block;
+    padding: 0 15px;
+    height: 100%;
+    font-size: 18px;
+    color: #{$navbarText};
+    vertical-align: text-bottom;
+    border-left: 1px solid #eaeaea;
+
+    &.hover-effect {
+      cursor: pointer;
+      transition: background 0.3s;
+
+      &:hover {
+        background: rgba(0, 0, 0, 0.025);
+      }
+    }
+
+    .notice-icon {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    .right-menu-item {
+      .notice-icon>i {
+        font-size: 18px;
+      }
+
+      sup {
+        top: 12px;
+        right: 25px;
+      }
+    }
+  }
+}
+
+.flex {
+  display: flex;
+  justify-content: space-between;
+}
+
+.dot_title {
+  height: 40px;
+}
+
+.dot::before {
+  content: '';
+  display: inline-block;
+  margin-right: 10px;
+  padding: 5px;
+  border-radius: 25px;
+  background-color: #f00;
+}
+
+.tip {
+  width: 37px;
+  height: 20px;
+  border-radius: 2px;
+  background-color: rgba(255, 0, 0, 1);
+  color: rgba(255, 255, 255, 1);
+  font-size: 14px;
+  text-align: center;
+}
+
+.drawer_top {
+  margin: 0 20px;
+}
+
+.center {
+  align-items: center;
+}
+
+.notice {
+  box-sizing: content-box;
+  margin: 0 20px;
+  margin-top: 20px;
+  background-color: rgba(255, 255, 255, 1);
+  height: 690px;
+  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
+  overflow-x: hidden;
+
+  &_item {
+    width: calc(450px - 80px);
+    margin: 20px;
+    border-bottom: 1px solid #ebeef5;
+  }
+}
+
+.icon {
+  &_bell {
+    text-align: right;
+    cursor: pointer;
+  }
+
+  &_close {
+    font-size: 25px;
+    cursor: pointer;
+  }
+}
+
+.drawer {
+  height: 100%;
+  display: flex;
+  font-size: 14px;
+
+  &_left {
+    width: 450px;
+    display: inline-block;
+  }
+
+  &_right {
+    width: 450px;
+    margin: 0 20px;
+    display: inline-block;
+
+    .radio {
+      display: flex;
+      justify-content: center;
+    }
+
+    &_content {
+      height: 855px;
+      padding: 0 2px;
+      overflow-y: auto;
+
+      &_item {
+        display: flex;
+        align-items: center;
+        margin: 20px 0;
+        padding: 0 10px;
+        height: 84px;
+        font-size: 14px;
+        border-radius: 5px;
+        background-color: rgba(255, 255, 255, 1);
+        box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.4);
+
+        &_text {
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+          flex: 1 1;
+          height: 84px;
+          padding-left: 20px;
+          line-height: 20px;
+        }
+      }
+    }
+  }
+}
+
+.download {
+  width: 595px;
+  max-height: 327px;
+  background-color: rgba(255, 255, 255, 1);
+
+  .clear {
+    cursor: pointer;
+  }
+
+  &_title {
+    display: flex;
+    justify-content: space-between;
+    padding: 5px 15px;
+
+    div:last-child {
+      display: flex;
+      justify-content: flex-end;
+      flex: 0 350px;
+
+      div {
+        flex: 1;
+        font-size: 14px;
+      }
+
+      div:last-child {
+        flex: 1;
+        text-align: right;
+      }
+    }
+  }
+
+  &_item {
+    max-height: 280px;
+    margin: 15px;
+    overflow-y: auto;
+
+    &_content {
+      display: flex;
+      justify-content: space-between;
+      margin: 10px 0;
+      padding-bottom: 5px;
+      font-size: 14px;
+      border-bottom: 1px solid rgba(204, 204, 204, 0.38);
+
+      div:last-child {
+        display: flex;
+        justify-content: flex-end;
+        flex: 0 350px;
+
+        div {
+          flex: 1;
+        }
+
+        div:last-child {
+          flex: 1;
+          text-align: right;
+        }
+      }
+    }
+  }
+}
+
+.el-dropdown-menu {
+  padding: 0 !important;
+  margin: 0 !important;
+  z-index: 9999 !important;
+}
+
+::v-deep .el-dropdown-menu__item.is-disabled {
+  color: #000;
+  padding: 20px;
+  border-bottom: 1px solid #EBEEF5;
+}
+
+.yidong {
+  ::v-deep .el-dropdown-menu__item {
+    padding: 0;
+  }
+}
+
+::v-deep ul>li:last-child {
+  border-bottom: none !important;
+}
+
+.QRcode {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.QRcode-img {
+  width: 120px;
+  height: 120px;
+  margin-right: 5px;
+  border: 1px solid #EBEEF5;
+}
+
+.shouji-icon {
+  width: 40px;
+  height: 40px;
+  margin-right: 10px;
+}
+
+.liveTitle {
+  color: #f00;
+}</style>

src/views/setting/organizationManagement/settledManagement/index.vue

@@ -155,6 +155,60 @@
             <span>建议尺寸：400*400</span>
           </div>
         </el-form-item>
+
+
+
+        <!-- --------------------------- -->
+        <el-form-item label="头像logo：" prop="imgUrl">
+          <div class="images">
+            <div class="main-img">
+              <div class="img" v-if="img3_url" @mouseover="img3_hover = true;" @mouseout="img3_hover = false;">
+                <el-image ref="img3" :src="img3_url" :preview-src-list="[img3_url]" style="width: 120px; height: 120px" fit="contain"></el-image>
+                <div class="mask" v-show="img3_hover">
+                  <i class="el-icon-zoom-in" @click="previewImage('img3')"></i>
+                  <i class="el-icon-upload2" @click="uploadImage('img3')"></i>
+                </div>
+              </div>
+              <div class="add" v-else @click="uploadImage('img3')">
+                <i class="el-icon-plus avatar-uploader-icon"></i>
+              </div>
+            </div>
+            <!-- <div class="tmp-img">
+              <el-image :src="require('@/assets/template/template_3.png')" :preview-src-list="[require('@/assets/template/template_3.png')]" style="width: 120px; height: 120px; display: block" fit="contain"></el-image>
+              <div class="tmp">示例图</div>
+            </div> -->
+          </div>
+          <!-- <div class="tips">
+            <span>建议尺寸：400*400</span>
+          </div> -->
+        </el-form-item>
+        <!-- --------------------------- -->
+        <el-form-item label="头像logo：" prop="imgUrl">
+          <div class="images">
+            <div class="main-img">
+              <div class="img" v-if="img3_url" @mouseover="img3_hover = true;" @mouseout="img3_hover = false;">
+                <el-image ref="img3" :src="img3_url" :preview-src-list="[img3_url]" style="width: 120px; height: 120px" fit="contain"></el-image>
+                <div class="mask" v-show="img3_hover">
+                  <i class="el-icon-zoom-in" @click="previewImage('img3')"></i>
+                  <i class="el-icon-upload2" @click="uploadImage('img3')"></i>
+                </div>
+              </div>
+              <div class="add" v-else @click="uploadImage('img3')">
+                <i class="el-icon-plus avatar-uploader-icon"></i>
+              </div>
+            </div>
+            <!-- <div class="tmp-img">
+              <el-image :src="require('@/assets/template/template_3.png')" :preview-src-list="[require('@/assets/template/template_3.png')]" style="width: 120px; height: 120px; display: block" fit="contain"></el-image>
+              <div class="tmp">示例图</div>
+            </div> -->
+          </div>
+          <!-- <div class="tips">
+            <span>建议尺寸：400*400</span>
+          </div> -->
+        </el-form-item>
+        <!-- --------------------------- -->
+
+
       </el-form>
     </div>