[edit][style]

src/view/iframe/treasure-hunt/components/boxs.vue

@@ -179,9 +179,11 @@ const btnStatus = () => {
 
 const mouseItem = (i) => {
     state.boxs[i].show = true
+    state.active_share_channel = true
 }
 const mouseLeaveItem = (i) => {
     state.boxs[i].show = false
+    state.active_share_channel = false
 }
 
 const boxsStatus = () => {

src/view/iframe/treasure-hunt/components/invite-list.vue

@@ -1,61 +1,63 @@
 <template>
-    <div class="content">
-      <div class="horizontal-invited-wrapper" v-if="state.invited_list.length">
-        invited（{{state.inviteCount}}）
-        <div class="horizontal-invited-list" @mouseleave="invitedListMouseleave($event)">
-          <template v-for="(item, index) in state.invited_list" :key="index" >
-            <div class="invited-item" v-if="index < 9" @mouseenter="invitedItemMouseenter(item)">
-             <img :src="item.userInfo.avatarUrl" />
-            </div>
-          </template>
+  <div class="content">
+    <div class="horizontal-invited-wrapper" v-if="state.invited_list.length">
+      invited（{{ state.inviteCount }}）
+      <div class="horizontal-invited-list" @mouseleave="invitedListMouseleave($event)">
+        <template v-for="(item, index) in state.invited_list" :key="index">
+          <div class="invited-item" v-if="index < 9" @mouseenter="invitedItemMouseenter(item)">
+            <img :src="item.userInfo.avatarUrl" />
+          </div>
+        </template>
+      </div>
+      <img class="more" v-if="state.invited_list.length > 9" :src="require('@/assets/svg/icon-invited-more.svg')"
+        @mouseenter="moreMouseenter" @mouseleave="moreMouseleave" />
+    </div>
+
+    <div class="invited-user-info" @mouseenter="invitedItemMouseenter()" @mouseleave="invitedListMouseleave($event)"
+      v-if="hoverInvitedUserInfo.userInfo">
+      <div class="left">
+        <img class="avatar" :src="hoverInvitedUserInfo.userInfo.avatarUrl" />
+      </div>
+      <div class="right">
+        <div class="user-info">
+          <div class="name">
+            {{ hoverInvitedUserInfo.userInfo.nickName }}
+          </div>
+          <div class="time">
+            {{ getTime(hoverInvitedUserInfo.timestamp) }}
+          </div>
         </div>
-        <img class="more" v-if="state.invited_list.length > 9" :src="require('@/assets/svg/icon-invited-more.svg')"  @mouseenter="moreMouseenter"  @mouseleave="moreMouseleave" />
+        <span class="channel">
+          <img class="app-icon" :src="hoverInvitedUserInfo.userInfo.avatarUrl" />
+          WhatsApp
+        </span>
       </div>
+    </div>
 
-      <div class="invited-user-info"  @mouseenter="invitedItemMouseenter()"
-       @mouseleave="invitedListMouseleave($event)" v-if="hoverInvitedUserInfo.userInfo">
+    <div class="vertical-invited-wrapper" v-if="showVerticalInvitedList" @mouseenter="moreMouseenter"
+      @mouseleave="moreMouseleave" @scroll="handleScroll($event)">
+      <div class="invited-user-info" v-for="(item, index) in state.invited_list" :key="index">
         <div class="left">
-            <img class="avatar" :src="hoverInvitedUserInfo.userInfo.avatarUrl" />
+          <img @click="clickItem(item)" class="avatar" :src="item.userInfo.avatarUrl" />
         </div>
         <div class="right">
-            <div class="user-info">
-              <div class="name">
-              {{ hoverInvitedUserInfo.userInfo.nickName }}
-              </div>
-              <div class="time">
-                {{ getTime(hoverInvitedUserInfo.timestamp) }}
-              </div>
+          <div class="user-info">
+            <div class="name">
+              {{ item.userInfo.nickName }}
+            </div>
+            <div class="time">
+              {{ getTime(item.timestamp) }}
             </div>
-            <span class="channel">
-              <img class="app-icon" :src="hoverInvitedUserInfo.userInfo.avatarUrl" />
-              WhatsApp
-            </span>
-        </div>
-      </div>
-
-      <div class="vertical-invited-wrapper" v-if="showVerticalInvitedList" @mouseenter="moreMouseenter"  @mouseleave="moreMouseleave" @scroll="handleScroll($event)">
-        <div class="invited-user-info"  v-for="(item, index) in state.invited_list" :key="index">
-          <div class="left">
-              <img @click="clickItem(item)" class="avatar" :src="item.userInfo.avatarUrl" />
-          </div>
-          <div class="right">
-              <div class="user-info">
-                <div class="name">
-                {{ item.userInfo.nickName }}
-                </div>
-                <div class="time">
-                  {{ getTime(item.timestamp) }}
-                </div>
-              </div>
-              <span class="channel">
-                <img class="app-icon" :src="item.userInfo.avatarUrl" />
-                WhatsApp
-              </span>
           </div>
+          <span class="channel">
+            <img class="app-icon" :src="item.userInfo.avatarUrl" />
+            WhatsApp
+          </span>
         </div>
       </div>
+    </div>
 
-        <!-- <div class="list" @scroll="handleScroll($event)">
+    <!-- <div class="list" @scroll="handleScroll($event)">
             <div class="item" v-for="item in state.invited_list" :key="item.userInfo.uid">
                 <div class="left">
                     <img :src="item.userInfo.avatarUrl" alt="" @click="clickItem(item)" />
@@ -66,12 +68,12 @@
                 </div>
             </div>
         </div> -->
-        <!-- <div class="footer">
+    <!-- <div class="footer">
             <v-btn :txt="state.open_btn.txt" :font-size="'17px'" class="btn" :icon="false" :loading="state.btn_loading"
                 :disabled="state.open_btn.disabled" v-click-log="state.log_invite_btn_click" @onClick="clickBtn"
                 font-weight="600"></v-btn>
         </div>-->
-    </div>
+  </div>
 </template>
 <script setup>
 import VBtn from '@/view/iframe/treasure-hunt/components/btn.vue'
@@ -92,365 +94,373 @@ let timer = null;
 let timer1 = null;
 
 state.log_invite_btn_click = {
-    businessType: Report.businessType.buttonClick,
-    pageSource: Report.pageSource.inviteFriendsPage,
-    objectType: Report.objectType.openChestButton,
-    redPacketType: Report.redPacketType.treasure,
-    shareLinkId: state.invite_code,
-    myShareLinkId: state.detail.inviteCopyUrl,
-    currentInvitedNum: state.inviteCount,
-    postId: state.postId
+  businessType: Report.businessType.buttonClick,
+  pageSource: Report.pageSource.inviteFriendsPage,
+  objectType: Report.objectType.openChestButton,
+  redPacketType: Report.redPacketType.treasure,
+  shareLinkId: state.invite_code,
+  myShareLinkId: state.detail.inviteCopyUrl,
+  currentInvitedNum: state.inviteCount,
+  postId: state.postId
 }
 
 state.log_invite_list_show = {
-    businessType: Report.businessType.pageView,
-    pageSource: Report.pageSource.beenInvitedPage,
-    redPacketType: Report.redPacketType.treasure,
-    shareLinkId: state.invite_code,
-    myShareLinkId: state.detail.inviteCopyUrl,
-    currentInvitedNum: state.inviteCount,
-    postId: state.postId
+  businessType: Report.businessType.pageView,
+  pageSource: Report.pageSource.beenInvitedPage,
+  redPacketType: Report.redPacketType.treasure,
+  shareLinkId: state.invite_code,
+  myShareLinkId: state.detail.inviteCopyUrl,
+  currentInvitedNum: state.inviteCount,
+  postId: state.postId
 }
 
 onMounted(() => {
-    state.btn_loading = false
-    list()
+  state.btn_loading = false
+  list()
 })
 
 const invitedItemMouseenter = (params) => {
-  if(timer) clearTimeout(timer)
-  if(params) {
+  if (timer) clearTimeout(timer)
+  if (params) {
     hoverInvitedUserInfo.value = params;
   }
 }
 
 const invitedListMouseleave = (params) => {
-  timer = setTimeout(function(){
+  timer = setTimeout(function () {
     hoverInvitedUserInfo.value = {};
-  },600);
+  }, 600);
 }
 
 const moreMouseenter = () => {
-  if(timer1) clearTimeout(timer1)
+  if (timer1) clearTimeout(timer1)
   showVerticalInvitedList.value = true;
 }
 
 const moreMouseleave = () => {
-  timer1 = setTimeout(function(){
+  timer1 = setTimeout(function () {
     showVerticalInvitedList.value = false;
-  },600);
+  }, 600);
 }
 
 const clickItem = (item) => {
-    window.open(`https://twitter.com/${item.userInfo.nickName}`)
+  window.open(`https://twitter.com/${item.userInfo.nickName}`)
 }
 
 function handleScroll(e) {
-    if (list_end) {
-        return
-    }
-    e = e.target
-    if ((e.clientHeight + e.scrollTop) / e.scrollHeight > .8) {
-        list_end = true
-        inviteListScroll()
-    }
+  if (list_end) {
+    return
+  }
+  e = e.target
+  if ((e.clientHeight + e.scrollTop) / e.scrollHeight > .8) {
+    list_end = true
+    inviteListScroll()
+  }
 }
 
 const list = () => {
-    state.inviteListRefresh()
+  state.inviteListRefresh()
 }
 
 // 刷新时调用
 state.inviteListRefresh = () => {
-    let last_timestamp = 0
-    if (state.invited_list.length > 0) {
-        last_timestamp = state.invited_list[0].timestamp
-    }
+  let last_timestamp = 0
+  if (state.invited_list.length > 0) {
+    last_timestamp = state.invited_list[0].timestamp
+  }
 
-    inviteListRefresh({
-        params: {
-            postId: state.postId,
-            lastTimestamp: last_timestamp,
-        }
-    }).then((res) => {
-        if (res.code == 0) {
-          handleCommon(res.data)
-        }
-    })
+  inviteListRefresh({
+    params: {
+      postId: state.postId,
+      lastTimestamp: last_timestamp,
+    }
+  }).then((res) => {
+    if (res.code == 0) {
+      handleCommon(res.data)
+    }
+  })
 }
 
 const handleCommon = (data) => {
-    state.inviteCount = data.inviteCount
-    // if (state.inviteCount > 0) {
-    //     state.tabs[1].txt = `invited(${state.inviteCount})`
-    // }
-
-    if (data.inviteUsers.length > 0) {
-        data.inviteUsers.forEach(item => {
-            if (state.invited_list.filter((item2) => { return item2.userInfo.uid == item.userInfo.uid }).length == 0) {
-                state.invited_list.push(item)
-            }
-        })
-        state.invited_list = state.invited_list.sort((a, b) => {
-            return b.timestamp - a.timestamp
-        })
-
-        list_end = false
-    } else {
-        list_end = false
-    }
+  state.inviteCount = data.inviteCount
+  // if (state.inviteCount > 0) {
+  //     state.tabs[1].txt = `invited(${state.inviteCount})`
+  // }
+
+  if (data.inviteUsers.length > 0) {
+    data.inviteUsers.forEach(item => {
+      if (state.invited_list.filter((item2) => { return item2.userInfo.uid == item.userInfo.uid }).length == 0) {
+        state.invited_list.push(item)
+      }
+    })
+    state.invited_list = state.invited_list.sort((a, b) => {
+      return b.timestamp - a.timestamp
+    })
+
+    list_end = false
+  } else {
+    list_end = false
+  }
 }
 
 // 滚动
 let inviteListScroll = () => {
-    // state.invited_list
-    let last_timestamp = 0
-    let len = state.invited_list.length
-    if (len > 0) {
-        last_timestamp = state.invited_list[len - 1].timestamp
-    }
+  // state.invited_list
+  let last_timestamp = 0
+  let len = state.invited_list.length
+  if (len > 0) {
+    last_timestamp = state.invited_list[len - 1].timestamp
+  }
 
-    inviteList({
-        params: {
-            inviteCode: state.invite_code,
-            postId: state.postId,
-            lastTimestamp: last_timestamp,
-            pageSize: page_size
-        }
-    }).then((res) => {
-        if (res.code == 0) {
+  inviteList({
+    params: {
+      inviteCode: state.invite_code,
+      postId: state.postId,
+      lastTimestamp: last_timestamp,
+      pageSize: page_size
+    }
+  }).then((res) => {
+    if (res.code == 0) {
 
-            handleCommon(res.data)
-        }
-    })
+      handleCommon(res.data)
+    }
+  })
 }
 
 const getTime = (timestamp) => {
-    let _d1 = moment(new Date().getTime())
-    let _d2 = moment(timestamp)
-    const plural = (n, s) => {
-        let _str = `${n} ${s} ago`
-        if (n > 1) {
-            _str = `${n} ${s}s ago`
-        }
-        return _str
+  let _d1 = moment(new Date().getTime())
+  let _d2 = moment(timestamp)
+  const plural = (n, s) => {
+    let _str = `${n} ${s} ago`
+    if (n > 1) {
+      _str = `${n} ${s}s ago`
     }
-    let _d = moment.duration(_d1.diff(_d2)).days()
-    if (_d) {
-        return plural(_d, 'day')
-    }
-    let _h = moment.duration(_d1.diff(_d2)).hours()
-    if (_h) {
-        return plural(_h, 'hour')
-    }
-    let _m = moment.duration(_d1.diff(_d2)).minutes()
-    if (_m) {
-        return plural(_m, 'min')
-    }
-    let _s = moment.duration(_d1.diff(_d2)).seconds()
-    return plural(_s, 'sec')
+    return _str
+  }
+  let _d = moment.duration(_d1.diff(_d2)).days()
+  if (_d) {
+    return plural(_d, 'day')
+  }
+  let _h = moment.duration(_d1.diff(_d2)).hours()
+  if (_h) {
+    return plural(_h, 'hour')
+  }
+  let _m = moment.duration(_d1.diff(_d2)).minutes()
+  if (_m) {
+    return plural(_m, 'min')
+  }
+  let _s = moment.duration(_d1.diff(_d2)).seconds()
+  return plural(_s, 'sec')
 }
 
 async function clickBtn() {
-    let _userInfo = await state.checkIsLogin()
-    if (!_userInfo) {
-        return
-    }
-    state.btn_loading = true
-    state.treasureOpen()
+  let _userInfo = await state.checkIsLogin()
+  if (!_userInfo) {
+    return
+  }
+  state.btn_loading = true
+  state.treasureOpen()
 }
 
 </script>
 <style lang="scss" scoped>
 .content {
-    position: absolute;
-    bottom: 0px;
-    width: 100%;
+  position: absolute;
+  bottom: 0px;
+  width: 100%;
 
-    .horizontal-invited-wrapper {
-      width: 100%;
-      padding: 12px 14px;
-      box-sizing: border-box;
+  .horizontal-invited-wrapper {
+    width: 100%;
+    padding: 12px 14px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    font-weight: 400;
+    font-size: 12px;
+    color: #A7A39F;
+
+    .horizontal-invited-list {
       display: flex;
       align-items: center;
-      font-weight: 400;
-      font-size: 12px;
-      color: #A7A39F;
+      margin-left: 5px;
+      cursor: pointer;
 
-      .horizontal-invited-list {
-        display: flex;
-        align-items: center;
-        margin-left: 5px;
-        cursor: pointer;
+      .invited-item {
+        width: 16px;
+        height: 16px;
+        padding: 0 5px;
 
-        .invited-item {
+        img {
           width: 16px;
           height: 16px;
-          padding: 0 5px;
-          img {
-            width: 16px;
-            height: 16px;
-            border-radius: 50%;
-          }
+          border-radius: 50%;
         }
       }
+    }
+
+    .more {
+      margin-left: 5px;
+      cursor: pointer;
+    }
+  }
+
+  .vertical-invited-wrapper {
+    width: 343px;
+    height: 308px;
+    background: #FFFFFF;
+    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.25);
+    border-radius: 16px;
+    overflow-y: scroll;
+    position: absolute;
+    bottom: -316px;
+    left: 16px;
+    animation: fade-in 0.25s linear forwards;
 
-      .more {
-        margin-left: 5px;
-        cursor: pointer;
+    .invited-user-info {
+      position: static !important;
+      border-radius: 0px !important;
+      box-shadow: none !important;
+      padding: 0 !important;
+      animation: none !important;
+
+      .left,
+      .right {
+        padding: 9px 0;
+      }
+
+      .left {
+        padding-left: 16px;
+      }
+
+      .right {
+        padding-right: 16px;
+        box-shadow: inset 0px -1px 0px #F2F2F2;
+        box-sizing: border-box;
+      }
+    }
+  }
+
+  .invited-user-info {
+    width: 343px;
+    padding: 9px 16px;
+    box-sizing: border-box;
+    background: #FFFFFF;
+    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.25);
+    border-radius: 16px;
+    position: absolute;
+    bottom: -62px;
+    left: 16px;
+    display: flex;
+    justify-content: space-between;
+    animation: fade-in 0.25s linear forwards;
+
+    .left {
+      display: flex;
+      align-items: center;
+
+      .avatar {
+        width: 30px;
+        height: 30px;
+        margin-right: 16px;
+        border-radius: 50%;
       }
     }
 
-    .vertical-invited-wrapper {
-      width: 343px;
-      height: 308px;
-      background: #FFFFFF;
-      box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.25);
-      border-radius: 16px;
-      overflow-y: scroll;
-      position: absolute;
-      bottom: -316px;
-      left: 16px;
-      animation: fade-in 0.25s linear forwards;
-
-      .invited-user-info {
-        position: static !important;
-        border-radius: 0px !important;
-        box-shadow: none !important;
-        padding: 0 !important;
-        animation: none !important;
-        .left, .right {
-          padding: 9px 0;
+    .right {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+
+      .user-info {
+        .name {
+          margin-bottom: 5px;
+          font-weight: 500;
+          font-size: 15px;
         }
-        .left {
-          padding-left: 16px;
+
+        .time {
+          font-weight: 400;
+          font-size: 12px;
+          color: #A9A9A9;
         }
-        .right {
-          padding-right: 16px;
-          box-shadow: inset 0px -1px 0px #F2F2F2;
-          box-sizing: border-box;
+      }
+
+      .channel {
+        height: min-content;
+        display: flex;
+        align-items: center;
+        font-weight: 400;
+        font-size: 12px;
+        color: #A9A9A9;
+
+        .app-icon {
+          width: 14px;
+          height: 14px;
+          margin-right: 4px;
+          border-radius: 50%;
         }
       }
     }
+  }
 
-    .invited-user-info {
-      width: 343px;
-      padding: 9px 16px;
-      box-sizing: border-box;
-      background: #FFFFFF;
-      box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.25);
-      border-radius: 16px;
-      position: absolute;
-      bottom: -62px;
-      left: 16px;
+
+
+  .list {
+    background: #fff;
+    height: 204px;
+    overflow-y: auto;
+
+    .item {
+      height: 60px;
       display: flex;
-      justify-content: space-between;
-      animation: fade-in 0.25s linear forwards;
+      align-items: center;
 
       .left {
-        display: flex;
-        align-items: center;
-        .avatar {
+        width: 58px;
+        text-align: center;
+
+        img {
+          cursor: pointer;
+          border-radius: 50px;
           width: 30px;
           height: 30px;
-          margin-right: 16px;
-          border-radius: 50%;
         }
       }
 
       .right {
+        flex: 1;
+        border-bottom: 1px solid #D9D9D9;
         display: flex;
+        align-items: center;
+        height: 100%;
         justify-content: space-between;
-        width: 100%;
-
-        .user-info {
-          .name {
-            margin-bottom: 5px;
-            font-weight: 500;
-            font-size: 15px;
-          }
-          .time {
-            font-weight: 400;
-            font-size: 12px;
-            color: #A9A9A9;
-          }
+
+        div:nth-child(1) {
+          color: #000000;
+          font-weight: 500;
+          font-size: 15px;
+          cursor: pointer;
         }
 
-        .channel {
-            height: min-content;
-            display: flex;
-            align-items: center;
-            font-weight: 400;
-            font-size: 12px;
-            color: #A9A9A9;
-
-            .app-icon {
-              width: 14px;
-              height: 14px;
-              margin-right: 4px;
-              border-radius: 50%;
-            }
+        div:nth-child(2) {
+          color: #A6A6A6;
+          font-weight: 400;
+          font-size: 12px;
+          margin-right: 17px;
+
         }
       }
     }
+  }
 
-
-
-    .list {
-        background: #fff;
-        height: 204px;
-        overflow-y: auto;
-
-        .item {
-            height: 60px;
-            display: flex;
-            align-items: center;
-
-            .left {
-                width: 58px;
-                text-align: center;
-
-                img {
-                    cursor: pointer;
-                    border-radius: 50px;
-                    width: 30px;
-                    height: 30px;
-                }
-            }
-
-            .right {
-                flex: 1;
-                border-bottom: 1px solid #D9D9D9;
-                display: flex;
-                align-items: center;
-                height: 100%;
-                justify-content: space-between;
-
-                div:nth-child(1) {
-                    color: #000000;
-                    font-weight: 500;
-                    font-size: 15px;
-                    cursor: pointer;
-                }
-
-                div:nth-child(2) {
-                    color: #A6A6A6;
-                    font-weight: 400;
-                    font-size: 12px;
-                    margin-right: 17px;
-
-                }
-            }
-        }
+  @keyframes fade-in {
+    from {
+      opacity: 0;
     }
 
-    @keyframes fade-in {
-      from {
-        opacity: 0;
-      }
-      to {
-        opacity: 1;
-      }
+    to {
+      opacity: 1;
     }
+  }
 }
 </style>

src/view/iframe/treasure-hunt/invite.vue

@@ -1,9 +1,12 @@
 <template>
     <!-- 邀请页 -->
     <div class="area-process" v-show-log="state.log_invite_show">
-        <v-head :left-data="state.detail.postUserInfo || null" :rightData="state.detail.remainAmountUsdValue"></v-head>
-        <v-carousel></v-carousel>
-        <v-boxs></v-boxs>
+        <div class="area1">
+            <v-head :left-data="state.detail.postUserInfo || null" :rightData="state.detail.remainAmountUsdValue">
+            </v-head>
+            <v-carousel></v-carousel>
+        </div>
+        <v-boxs style="margin-top: 30px;"></v-boxs>
         <invite-list></invite-list>
     </div>
 
@@ -73,10 +76,16 @@ const clickItem = (item) => {
 <style lang="scss"  scoped>
 .area-process {
     width: 375px;
-    height: 170px;
-    background: linear-gradient(179.96deg, #735931 0.04%, #0E0803 53.64%);
+    height: 260px;
+    background: linear-gradient(179.96deg, #25180D 48.1%, #6A4C1F 62.7%, #24180C 77.69%);
     position: relative;
 
+    .area1 {
+        background: rgba(255, 255, 255, 0.1);
+    }
+
+    .area2 {}
+
 }
 
 .area-info {