css

liukangdong

2024-06-25 ebc96a1cf0424c04dceacbc42f9ad2a897223be9

 h5/pages/meeting/myAppointment/myAppointment.vue

@@ -1,618 +1,667 @@
<template>

   <page-meta :page-style="'overflow:'+(pageShow?'hidden':'visible')"></page-meta>

   <view class="yuyue">

      <view class="yuyue_head">

         <view class="yuyue_head_input">

            <u--input

               placeholder="搜索"

               prefixIcon="search"

               v-model="meetingName"

               @confirm="sou"

               prefixIconStyle="font-size: 22px; color: #909399"

            ></u--input>

         </view>

         <view class="yuyue_head_list">

            <view class="yuyue_head_list_item" v-for="(item, index) in cate" :key="index" @click="clickItem(index)">

               <text :class="i === index ? 'yuyue_head_list_item_active' : ''">{{item.name}}</text>

               <view class="yuyue_head_list_item_h" v-show="i === index"></view>

            </view>

         </view>

      </view>

		
      <view class="yuyue_content" v-if="list && list.length > 0">

         <view class="yuyue_content_item" v-for="(item, index) in list" :key="index">

            <view class="item_a" @click="jump(item.id)">

               <view class="item_a_title">{{item.meetingName}}</view>

               <view class="item_a_1 item_a_two" v-if="item.meetingStatus === 1">未开始</view>

               <view class="item_a_1 item_a_one" v-else-if="item.meetingStatus === 2">进行中</view>

               <view class="item_a_1 item_a_three" v-else>已结束</view>

            </view>

            <view class="item_b" @click="jump(item.id)"></view>

            <view class="item_c" @click="jump(item.id)">

               <view class="item_c_item">

                  <text>会议时间：</text>

                  <text>{{item.meetingDate}} {{item.meetingTime}}</text>

               </view>

               <view class="item_c_item">

                  <text>会议室：</text>

                  <text>{{item.roomName}}</text>

               </view>

               <view class="item_c_item">

                  <text>预约人：</text>

                  <text>{{item.bookingUser}}</text>

               </view>

            </view>

            <view class="item_d" v-if="i === 0">

               <view class="item_d_left">

                  <view class="item_d_left_item" @click.stop="copy(item)" v-if="item.meetingStatus !== 3">

                     <image src="@/static/meeting/icon/ic_copy@2x.png" mode="widthFix"></image>

                     <text>复制</text>

                  </view>

                  <view class="item_d_left_item" @click="fenxiang(item)" v-if="item.meetingStatus !== 3">

                     <button open-type="share"></button>

                     <image src="@/static/meeting/icon/ic_fenxiang@2x.png" mode="widthFix"></image>

                     <text>分享</text>

                  </view>

                  <view class="item_d_left_item" v-if="item.meetingStatus === 1" @click.stop="closeRoom(item.meetingStatus, item.id)">

                     <image src="@/static/meeting/icon/ic_cancel@2x.png" mode="widthFix"></image>

                     <text>取消</text>

                  </view>

               </view>

               <view class="item_d_right" @click.stop="getQrCodes(item.id, item.roomName)">

                  开门码

               </view>

            </view>

         </view>

      </view>

		
      <view class="yuyue_content" v-else>

         <view class="yuyue_content_wu">

            <image src="@/static/meeting/common/364.png" mode="widthFix"></image>

         </view>

      </view>

		
      <!-- 开门码 -->

      <view class="details_ma">

         <u-popup :show="show" :closeable="true" :safeAreaInsetBottom="false" :round="0" mode="center" @close="close">

            <view class="box">

               <text class="box_a">{{roomName || ''}}</text>

               <!-- <text class="box_b">二维码{{time}}秒内有效</text> -->

               <text class="box_b" v-if="time > 0">二维码{{time}}秒内有效</text>

               <text class="box_b" v-else>二维码已过期，请点击二维码刷新</text>

               <view class="qrcode" @click="Refresh(1)">

                  <image :src="qrurl" mode="widthFix"></image>

               </view>

               <!-- <text class="box_c">出示该二维码，扫码进入会议室</text>

  <page-meta

    :page-style="'overflow:' + (pageShow ? 'hidden' : 'visible')"

  ></page-meta>

  <view class="yuyue">

    <view class="yuyue_head">

      <view class="yuyue_head_input">

        <u--input

          placeholder="搜索"

          prefixIcon="search"

          v-model="meetingName"

          @confirm="sou"

          prefixIconStyle="font-size: 22px; color: #909399"

        ></u--input>

      </view>

      <view class="yuyue_head_list">

        <view

          class="yuyue_head_list_item"

          v-for="(item, index) in cate"

          :key="index"

          @click="clickItem(index)"

        >

          <text :class="i === index ? 'yuyue_head_list_item_active' : ''">{{

            item.name

          }}</text>

          <view class="yuyue_head_list_item_h" v-show="i === index"></view>

        </view>

      </view>

    </view>



    <view class="yuyue_content" v-if="list && list.length > 0">

      <view

        class="yuyue_content_item"

        v-for="(item, index) in list"

        :key="index"

      >

        <view class="item_a" @click="jump(item.id)">

          <view class="item_a_title">{{ item.meetingName }}</view>

          <view class="item_a_1 item_a_two" v-if="item.meetingStatus === 1"

            >未开始</view

          >

          <view class="item_a_1 item_a_one" v-else-if="item.meetingStatus === 2"

            >进行中</view

          >

          <view class="item_a_1 item_a_three" v-else>已结束</view>

        </view>

        <view class="item_b" @click="jump(item.id)"></view>

        <view class="item_c" @click="jump(item.id)">

          <view class="item_c_item">

            <text>会议时间：</text>

            <text>{{ item.meetingDate }} {{ item.meetingTime }}</text>

          </view>

          <view class="item_c_item">

            <text>会议室：</text>

            <text>{{ item.roomName }}</text>

          </view>

          <view class="item_c_item">

            <text>预约人：</text>

            <text>{{ item.bookingUser }}</text>

          </view>

        </view>

        <view class="item_d" v-if="i === 0">

          <view class="item_d_left">

            <view

              class="item_d_left_item"

              @click.stop="copy(item)"

              v-if="item.meetingStatus !== 3"

            >

              <image

                src="@/static/meeting/icon/ic_copy@2x.png"

                mode="widthFix"

              ></image>

              <text>复制</text>

            </view>

            <view

              class="item_d_left_item"

              @click="fenxiang(item)"

              v-if="item.meetingStatus !== 3"

            >

              <button open-type="share"></button>

              <image

                src="@/static/meeting/icon/ic_fenxiang@2x.png"

                mode="widthFix"

              ></image>

              <text>分享</text>

            </view>

            <view

              class="item_d_left_item"

              v-if="item.meetingStatus === 1"

              @click.stop="closeRoom(item.meetingStatus, item.id)"

            >

              <image

                src="@/static/meeting/icon/ic_cancel@2x.png"

                mode="widthFix"

              ></image>

              <text>取消</text>

            </view>

          </view>

          <view

            class="item_d_right"

            @click.stop="getQrCodes(item.id, item.roomName)"

          >

            开门码

          </view>

        </view>

      </view>

    </view>



    <view class="yuyue_content" v-else>

      <view class="yuyue_content_wu">

        <image src="@/static/meeting/common/364.png" mode="widthFix"></image>

      </view>

    </view>



    <!-- 开门码 -->

    <view class="details_ma">

      <u-popup

        :show="show"

        :closeable="true"

        :safeAreaInsetBottom="false"

        :round="0"

        mode="center"

        @close="close"

      >

        <view class="box">

          <text class="box_a">{{ roomName || "" }}</text>

          <!-- <text class="box_b">二维码{{time}}秒内有效</text> -->

          <text class="box_b" v-if="time > 0">二维码{{ time }}秒内有效</text>

          <text class="box_b" v-else>二维码已过期，请点击二维码刷新</text>

          <view class="qrcode" @click="Refresh(1)">

            <image :src="qrurl" mode="widthFix"></image>

          </view>

          <!-- <text class="box_c">出示该二维码，扫码进入会议室</text>

               <text class="box_d">如果打不开请联系管理员：</text>

               <text class="box_e">李红和 18899039483</text> -->

            </view>

         </u-popup>

      </view>

		
      <!-- 取消会议 -->

      <u-modal

      :show="show1"

      title="提示"

      content='是否确认取消当前会议'

      @confirm="confirm"

      @cancel="close1"

      ref="uModal"

      :showCancelButton="true"

      asyncClose="true"></u-modal>

   </view>

        </view>

      </u-popup>

    </view>



    <!-- 取消会议 -->

    <u-modal

      :show="show1"

      title="提示"

      content="是否确认取消当前会议"

      @confirm="confirm"

      @cancel="close1"

      ref="uModal"

      :showCancelButton="true"

      asyncClose="true"

    ></u-modal>

  </view>

</template>



<script>

   import { mapState } from 'vuex'

   import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"

   export default {

      data() {

         return {

            i: 0,

            show: false,

            cate: [

               { name: '未开始', id: 1 },

               { name: '已结束', id: 2 }

            ],

            pageShow: false,

            id: '',

            meetingName: '',

            show1: false,

            val: '',

            list: [],

            next: false,

            page: 0,

            time: 0,

            roomName: '',

            link: '',

            qrurl: '',

            timer: null,

            timeValue: '',

            Id: '',

            share: {

               title: '',

               path: '',

               imageUrl: 'https://dmtest.ahapp.net/file/projects/20230511/13f256b832db4a4fadc5e6770f5727bf.png'

            }

         };

      },

      computed: {

         ...mapState(['token'])

      },

      components: { tkiQrcode },

      onReachBottom() {

         this.getList()

      },

      onLoad() {

         this.getList()

         this.getSYSTEM()

      },

      onShareAppMessage({from,target}) {

         if (from == 'button') {

            return this.share

         }

      },

      methods: {

         // 分享

         fenxiang(item) {

            this.share.title = item.meetingName

            this.share.path = `/packagesMine/meetingDetails/meetingDetails?shareId=${item.id}`

         },

         // 刷新二维码

         Refresh(type) {

            if (this.time !== 0) return

            uni.showLoading({

               title: '加载中',

               mask: true

            });

            uni.request({

               url: `${this.$baseUrl}web/meeting/getQrCodeImg?id=${this.Id}&token=${this.token}`,   //url地址

               method: 'GET',

               responseType: 'arraybuffer',

               header: {

                  'Content-Type': 'application/json'

               },

               success: res => {

                  const arrayBuffer = new Uint8Array(res.data)

                  const base64 = "data:image/png;base64," + uni.arrayBufferToBase64(arrayBuffer)   //这里需要添加前缀

                  this.qrurl = base64

                  if (type === 1) {

                     this.time = Number(this.timeValue) * 60

                     this.getTime()

                  }

               },

               complete() {

                  uni.hideLoading();

               }

            });

         },

         getTime() {

            this.timer = setInterval(() => {

               if (this.time === 0) {

                  clearInterval(this.timer)

                  this.timer = null

                  this.time = 0

                  return

               }

               this.time = this.time - 1

            }, 1000)

         },

         getSYSTEM() {

            this.$u.api.getSystemDictData({

               dictCode: 'SYSTEM',

               label: 'QR_OPENBOOK_VALIDTIME'

            }).then(res => {

               this.time = Number(res.data.code) * 60

               this.timeValue = Number(res.data.code)

            })

            this.$u.api.getSystemDictData({

               dictCode: 'SYSTEM',

               label: 'H5_LINK_ADDR'

            }).then(res => {

               this.link = res.data.code

            })

         },

         sou() {

            this.list = []

            this.next = false

            this.page = 0

            this.getList()

         },

         copy(item) {

            let val = `${item.bookingUser} 邀请您加入会议

import { mapState } from 'vuex'

import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"

export default {

  data() {

    return {

      i: 0,

      show: false,

      cate: [

        { name: '未开始', id: 1 },

        { name: '已结束', id: 2 }

      ],

      pageShow: false,

      id: '',

      meetingName: '',

      show1: false,

      val: '',

      list: [],

      next: false,

      page: 0,

      time: 0,

      roomName: '',

      link: '',

      qrurl: '',

      timer: null,

      timeValue: '',

      Id: '',

      share: {

        title: '',

        path: '',

        imageUrl: 'https://dmtest.ahapp.net/file/projects/20230511/13f256b832db4a4fadc5e6770f5727bf.png'

      }

    }

  },

  computed: {

    ...mapState(['token'])

  },

  components: { tkiQrcode },

  onReachBottom() {

    this.getList()

  },

  onLoad() {

    this.getList()

    this.getSYSTEM()

  },

  onShareAppMessage({ from, target }) {

    if (from == 'button') {

      return this.share

    }

  },

  methods: {

    // 分享

    fenxiang(item) {

      this.share.title = item.meetingName

      this.share.path = `/packagesMine/meetingDetails/meetingDetails?shareId=${item.id}`

    },

    // 刷新二维码

    Refresh(type) {

      if (this.time !== 0) return

      uni.showLoading({

        title: '加载中',

        mask: true

      })

      uni.request({

        url: `${this.$baseUrl}web/meeting/getQrCodeImg?id=${this.Id}&token=${this.token}`,   //url地址

        method: 'GET',

        responseType: 'arraybuffer',

        header: {

          'Content-Type': 'application/json'

        },

        success: res => {

          const arrayBuffer = new Uint8Array(res.data)

          const base64 = "data:image/png;base64," + uni.arrayBufferToBase64(arrayBuffer)   //这里需要添加前缀

          this.qrurl = base64

          if (type === 1) {

            this.time = Number(this.timeValue) * 60

            this.getTime()

          }

        },

        complete() {

          uni.hideLoading()

        }

      })

    },

    getTime() {

      this.timer = setInterval(() => {

        if (this.time === 0) {

          clearInterval(this.timer)

          this.timer = null

          this.time = 0

          return

        }

        this.time = this.time - 1

      }, 1000)

    },

    getSYSTEM() {

      this.$u.api.getSystemDictData({

        dictCode: 'SYSTEM',

        label: 'QR_OPENBOOK_VALIDTIME'

      }).then(res => {

        this.time = Number(res.data.code) * 60

        this.timeValue = Number(res.data.code)

      })

      this.$u.api.getSystemDictData({

        dictCode: 'SYSTEM',

        label: 'H5_LINK_ADDR'

      }).then(res => {

        this.link = res.data.code

      })

    },

    sou() {

      this.list = []

      this.next = false

      this.page = 0

      this.getList()

    },

    copy(item) {

      let val = `${item.bookingUser} 邀请您加入会议

会议主题：${item.meetingName}

会议室：${item.roomName}

会议时间：${item.meetingDate} ${item.meetingTime}

点击链接直接加入会议：

${this.link}?id=${item.id}`

            uni.setClipboardData({

               data: val,

               success: function () {

                  uni.showToast({

                     title: '会议信息复制成功，去分享给同事吧~',

                     icon:'none',

                     duration: 2000

                  });

               }

            });

         },

         close1() {

            this.show1 = false

         },

         closeRoom(status, id) {

            if (status !== 1) {

               uni.showToast({

                  title: '会议不可取消',

                  icon: "none",

                  duration: 2000

               });

               return

            }

            this.id = id

            this.show1 = true;

         },

         confirm() {

            this.$u.api.reservationCancel({

               id: this.id

            }).then(res => {

               this.show1 = false;

               if (res.code === 200) {

                  uni.showToast({

                     title: '取消成功',

                     icon: "none",

                     duration: 2000

                  });

                  this.list.forEach((item, index) => {

                     if (item.id === this.id) {

                        this.list.splice(index, 1)

                     }

                  })

               }

            })

         },

         jump(id) {

            uni.navigateTo({

               url: `/packagesMine/meetingDetails/meetingDetails?id=${id}`

            });

         },

         close() {

            this.time = 0

            clearInterval(this.timer)

            this.timer = null

            this.show = false

            this.pageShow = false

            uni.setScreenBrightness({

               value: 0.5,

               success: function () {

                  console.log('success');

               }

            });

         },

         getQrCodes(id, roomName) {

            this.Id = id

            this.time = 0

            this.Refresh()

            this.time = this.timeValue * 60

            this.getTime()

            this.pageShow = true

            this.roomName = roomName

				
            this.show = true

            uni.setScreenBrightness({

               value: 1,

               success: function () {

                  console.log('success');

               }

            });

         },

         clickItem(index) {

            this.i = index

            this.list = []

            this.next = false

            this.page = 0

            this.getList()

         },

         getList() {

            if (!this.next) {

               this.page = this.page + 1

               this.$u.api.myMeetingPage({

                  capacity: 10,

                  page: this.page,

                  model: {

                     queryType: 2,

                     roomsName: this.meetingName,

                     status: this.cate[this.i].id

                  }

               }).then(res => {

                  if (res.data.records.length > 0) {

                     this.list = [...this.list, ...res.data.records]

                  }

                  if (res.data.records.length < 10) {

                     this.next = true

                  }

               })

            }

         }

      }

   }

      uni.setClipboardData({

        data: val,

        success: function () {

          uni.showToast({

            title: '会议信息复制成功，去分享给同事吧~',

            icon: 'none',

            duration: 2000

          })

        }

      })

    },

    close1() {

      this.show1 = false

    },

    closeRoom(status, id) {

      if (status !== 1) {

        uni.showToast({

          title: '会议不可取消',

          icon: "none",

          duration: 2000

        })

        return

      }

      this.id = id

      this.show1 = true

    },

    confirm() {

      this.$u.api.reservationCancel({

        id: this.id

      }).then(res => {

        this.show1 = false

        if (res.code === 200) {

          uni.showToast({

            title: '取消成功',

            icon: "none",

            duration: 2000

          })

          this.list.forEach((item, index) => {

            if (item.id === this.id) {

              this.list.splice(index, 1)

            }

          })

        }

      })

    },

    jump(id) {

      uni.navigateTo({

        url: `/packagesMine/meetingDetails/meetingDetails?id=${id}`

      })

    },

    close() {

      this.time = 0

      clearInterval(this.timer)

      this.timer = null

      this.show = false

      this.pageShow = false

      uni.setScreenBrightness({

        value: 0.5,

        success: function () {

          console.log('success')

        }

      })

    },

    getQrCodes(id, roomName) {

      this.Id = id

      this.time = 0

      this.Refresh()

      this.time = this.timeValue * 60

      this.getTime()

      this.pageShow = true

      this.roomName = roomName



      this.show = true

      uni.setScreenBrightness({

        value: 1,

        success: function () {

          console.log('success')

        }

      })

    },

    clickItem(index) {

      this.i = index

      this.list = []

      this.next = false

      this.page = 0

      this.getList()

    },

    getList() {

      if (!this.next) {

        this.page = this.page + 1

        this.$u.api.myMeetingPage({

          capacity: 10,

          page: this.page,

          model: {

            queryType: 2,

            roomsName: this.meetingName,

            status: this.cate[this.i].id

          }

        }).then(res => {

          if (res.data.records.length > 0) {

            this.list = [...this.list, ...res.data.records]

          }

          if (res.data.records.length < 10) {

            this.next = true

          }

        })

      }

    }

  }

}

</script>



<style lang="scss">

   .yuyue {

      width: 100%;

      .details_ma /deep/ {

         .u-popup__content {

            width: 100%;

            .box {

               width: 100%;

               padding: 80rpx 0;

               box-sizing: border-box;

               background-color: #ffffff;

               display: flex;

               align-items: center;

               justify-content: center;

               flex-direction: column;

               .box_a {

                  padding: 0 30rpx;

                  box-sizing: border-box;

                  font-size: 36rpx;

                  font-family: PingFangSC-Semibold, PingFang SC;

                  font-weight: 600;

                  color: #222222;

               }

               .box_b {

                  font-size: 28rpx;

                  font-family: PingFangSC-Regular, PingFang SC;

                  font-weight: 400;

                  color: #0055FF;

                  margin-top: 40rpx;

               }

               .qrcode {

                  width: 440rpx;

                  height: 440rpx;

                  margin-top: 40rpx;

                  image {

                     width: 100%;

                     height: 100%;

                  }

               }

               .box_c {

                  font-size: 28rpx;

                  font-family: PingFangSC-Regular, PingFang SC;

                  font-weight: 400;

                  color: #333333;

                  margin-top: 40rpx;

               }

               .box_d {

                  font-size: 26rpx;

                  font-family: PingFangSC-Regular, PingFang SC;

                  font-weight: 400;

                  color: #666666;

                  margin-top: 32rpx;

               }

               .box_e {

                  font-size: 26rpx;

                  font-family: PingFangSC-Regular, PingFang SC;

                  font-weight: 400;

                  color: #666666;

               }

            }

         }

      }

      .yuyue_head {

         padding: 30rpx;

         background-color: #ffffff;

         box-sizing: border-box;

         position: sticky;

         top: 0;

         z-index: 999;

         .yuyue_head_input /deep/ {

            width: 100%;

            height: 72rpx;

            background: #F7F7F7;

            border-radius: 4rpx;

            .u-border {

               border: none !important;

            }

         }

         .yuyue_head_list {

            width: 100%;

            display: flex;

            align-items: center;

            margin-top: 30rpx;

            .yuyue_head_list_item {

               flex: 1;

               display: flex;

               align-items: center;

               justify-content: center;

               flex-direction: column;

               position: relative;

               text {

                  font-size: 28rpx;

                  font-family: PingFangSC-Regular, PingFang SC;

                  font-weight: 400;

                  color: #666666;

               }

               .yuyue_head_list_item_active {

                  font-size: 30rpx;

                  font-family: PingFangSC-Medium, PingFang SC;

                  font-weight: 500;

                  color: #222222;

               }

               .yuyue_head_list_item_h {

                  width: 60rpx;

                  height: 4rpx;

                  background: #0055FF;

                  border-radius: 3rpx;

                  position: absolute;

                  bottom: -30rpx;

                  left: 50%;

                  transform: translate(-50%, 0);

               }

            }

         }

      }

      .yuyue_content {

         width: 100%;

         padding: 20rpx 30rpx;

         box-sizing: border-box;

         .yuyue_content_wu {

            width: 100%;

            margin-top: 50rpx;

            display: flex;

            align-items: center;

            justify-content: center;

            image {

               width: 340rpx;

               height: 364rpx;

            }

         }

         .yuyue_content_item {

            width: 100%;

            padding: 30rpx;

            box-sizing: border-box;

            background: #ffffff;

            margin-bottom: 20rpx;

            &:last-child {

               margin-bottom: 0 !important;

            }

            .item_a {

               width: 100%;

               height: 50rpx;

               display: flex;

               align-items: center;

               justify-content: space-between;

               .item_a_title {

                  flex: 1;

                  white-space: nowrap;

                  text-overflow: ellipsis;

                  overflow: hidden;

                  font-size: 32rpx;

                  font-family: PingFangSC-Semibold, PingFang SC;

                  font-weight: 600;

                  color: #222222;

               }

               .item_a_one {

                  border: 2rpx solid #F62710 !important;

                  font-size: 22rpx;

                  font-family: PingFangSC-Regular, PingFang SC;

                  font-weight: 400;

                  color: #F62710;

               }

               .item_a_two {						
                  border: 2rpx solid #0055FF !important;

                  font-size: 22rpx;

                  font-family: PingFangSC-Regular, PingFang SC;

                  font-weight: 400;

                  color: #0055FF;

               }

               .item_a_three {

                  border: 2rpx solid #999999 !important;

                  font-size: 22rpx;

                  font-family: PingFangSC-Regular, PingFang SC;

                  font-weight: 400;

                  color: #999999;

               }

               .item_a_1 {

                  flex-shrink: 0;

                  padding: 0 8rpx;

                  height: 38rpx;

                  box-sizing: border-box;

                  line-height: 38rpx;

                  text-align: center;

                  border-radius: 4rpx;

                  margin-left: 20rpx;

               }

            }

            .item_b {

               width: 100%;

               height: 1rpx;

               background-color: #E5E5E5;

               margin: 28rpx 0 30rpx 0;

            }

            .item_c {

               width: 100%;

               display: flex;

               flex-direction: column;

               .item_c_item {

                  display: flex;

                  align-items: flex-start;

                  margin-bottom: 24rpx;

                  &:last-child {

                     margin-bottom: 0 !important;

                  }

                  text {

                     &:first-child {

                        flex-shrink: 0;

                        font-size: 28rpx;

                        font-family: PingFangSC-Regular, PingFang SC;

                        font-weight: 400;

                        color: #666666;

                     }

                     &:last-child {

                        font-size: 28rpx;

                        font-family: PingFangSC-Regular, PingFang SC;

                        font-weight: 400;

                        color: #333333;

                     }

                  }

               }

            }

            .item_d {

               width: 100%;

               display: flex;

               align-items: center;

               justify-content: space-between;

               margin-top: 40rpx;

               .item_d_left {

                  display: flex;

                  align-items: center;

                  .item_d_left_item {

                     display: flex;

                     align-items: center;

                     justify-content: center;

                     margin-right: 40rpx;

                     position: relative;

                     overflow: hidden;

                     &:last-child {

                        margin-right: 0 !important;

                     }

                     button {

                        position: absolute;

                        width: 300rpx;

                        height: 300rpx;

                        border: none;

                        top: -20rpx;

                        left: -20rpx;

                        background: rgba(0, 0, 0, 0);

                     }

                     image {

                        width: 44rpx;

                        height: 44rpx;

                        margin-right: 8rpx;

                     }

                     text {

                        font-size: 26rpx;

                        font-family: PingFangSC-Regular, PingFang SC;

                        font-weight: 400;

                        color: #666666;

                     }

                  }

               }

               .item_d_right {

                  width: 136rpx;

                  height: 56rpx;

                  line-height: 56rpx;

                  text-align: center;

                  background: #0055FF;

                  border-radius: 4rpx;

                  font-size: 24rpx;

                  font-family: PingFangSC-Regular, PingFang SC;

                  font-weight: 400;

                  color: #FFFFFF;

               }

            }

         }

      }

   }

.yuyue {

  width: 100%;

  .details_ma /deep/ {

    .u-popup__content {

      width: 100%;

      .box {

        width: 100%;

        padding: 80rpx 0;

        box-sizing: border-box;

        background-color: #ffffff;

        display: flex;

        align-items: center;

        justify-content: center;

        flex-direction: column;

        .box_a {

          padding: 0 30rpx;

          box-sizing: border-box;

          font-size: 36rpx;

          font-family: PingFangSC-Semibold, PingFang SC;

          font-weight: 600;

          color: #222222;

        }

        .box_b {

          font-size: 28rpx;

          font-family: PingFangSC-Regular, PingFang SC;

          font-weight: 400;

          color: #0055ff;

          margin-top: 40rpx;

        }

        .qrcode {

          width: 440rpx;

          height: 440rpx;

          margin-top: 40rpx;

          image {

            width: 100%;

            height: 100%;

          }

        }

        .box_c {

          font-size: 28rpx;

          font-family: PingFangSC-Regular, PingFang SC;

          font-weight: 400;

          color: #333333;

          margin-top: 40rpx;

        }

        .box_d {

          font-size: 26rpx;

          font-family: PingFangSC-Regular, PingFang SC;

          font-weight: 400;

          color: #666666;

          margin-top: 32rpx;

        }

        .box_e {

          font-size: 26rpx;

          font-family: PingFangSC-Regular, PingFang SC;

          font-weight: 400;

          color: #666666;

        }

      }

    }

  }

  .yuyue_head {

    padding: 30rpx;

    background-color: #ffffff;

    box-sizing: border-box;

    position: sticky;

    top: 0;

    z-index: 999;

    .yuyue_head_input /deep/ {

      width: 100%;

      height: 72rpx;

      background: #f7f7f7;

      border-radius: 4rpx;

      .u-border {

        border: none !important;

      }

    }

    .yuyue_head_list {

      width: 100%;

      display: flex;

      align-items: center;

      margin-top: 30rpx;

      .yuyue_head_list_item {

        flex: 1;

        display: flex;

        align-items: center;

        justify-content: center;

        flex-direction: column;

        position: relative;

        text {

          font-size: 28rpx;

          font-family: PingFangSC-Regular, PingFang SC;

          font-weight: 400;

          color: #666666;

        }

        .yuyue_head_list_item_active {

          font-size: 30rpx;

          font-family: PingFangSC-Medium, PingFang SC;

          font-weight: 600;

          color: #222222;

        }

        .yuyue_head_list_item_h {

          width: 60rpx;

          height: 4rpx;

          background: #0055ff;

          border-radius: 3rpx;

          position: absolute;

          bottom: -30rpx;

          left: 50%;

          transform: translate(-50%, 0);

        }

      }

    }

  }

  .yuyue_content {

    width: 100%;

    padding: 20rpx 30rpx;

    box-sizing: border-box;

    .yuyue_content_wu {

      width: 100%;

      margin-top: 50rpx;

      display: flex;

      align-items: center;

      justify-content: center;

      image {

        width: 340rpx;

        height: 364rpx;

      }

    }

    .yuyue_content_item {

      width: 100%;

      padding: 30rpx;

      box-sizing: border-box;

      background: #ffffff;

      margin-bottom: 20rpx;

      &:last-child {

        margin-bottom: 0 !important;

      }

      .item_a {

        width: 100%;

        height: 50rpx;

        display: flex;

        align-items: center;

        justify-content: space-between;

        .item_a_title {

          flex: 1;

          white-space: nowrap;

          text-overflow: ellipsis;

          overflow: hidden;

          font-size: 32rpx;

          font-family: PingFangSC-Semibold, PingFang SC;

          font-weight: 600;

          color: #222222;

        }

        .item_a_one {

          border: 2rpx solid #f62710 !important;

          font-size: 22rpx;

          font-family: PingFangSC-Regular, PingFang SC;

          font-weight: 400;

          color: #f62710;

        }

        .item_a_two {

          border: 2rpx solid #0055ff !important;

          font-size: 22rpx;

          font-family: PingFangSC-Regular, PingFang SC;

          font-weight: 400;

          color: #0055ff;

        }

        .item_a_three {

          border: 2rpx solid #999999 !important;

          font-size: 22rpx;

          font-family: PingFangSC-Regular, PingFang SC;

          font-weight: 400;

          color: #999999;

        }

        .item_a_1 {

          flex-shrink: 0;

          padding: 0 8rpx;

          height: 38rpx;

          box-sizing: border-box;

          line-height: 38rpx;

          text-align: center;

          border-radius: 4rpx;

          margin-left: 20rpx;

        }

      }

      .item_b {

        width: 100%;

        height: 1rpx;

        background-color: #e5e5e5;

        margin: 28rpx 0 30rpx 0;

      }

      .item_c {

        width: 100%;

        display: flex;

        flex-direction: column;

        .item_c_item {

          display: flex;

          align-items: flex-start;

          margin-bottom: 24rpx;

          &:last-child {

            margin-bottom: 0 !important;

          }

          text {

            &:first-child {

              flex-shrink: 0;

              font-size: 28rpx;

              font-family: PingFangSC-Regular, PingFang SC;

              font-weight: 400;

              color: #666666;

            }

            &:last-child {

              font-size: 28rpx;

              font-family: PingFangSC-Regular, PingFang SC;

              font-weight: 400;

              color: #333333;

            }

          }

        }

      }

      .item_d {

        width: 100%;

        display: flex;

        align-items: center;

        justify-content: space-between;

        margin-top: 40rpx;

        .item_d_left {

          display: flex;

          align-items: center;

          .item_d_left_item {

            display: flex;

            align-items: center;

            justify-content: center;

            margin-right: 40rpx;

            position: relative;

            overflow: hidden;

            &:last-child {

              margin-right: 0 !important;

            }

            button {

              position: absolute;

              width: 300rpx;

              height: 300rpx;

              border: none;

              top: -20rpx;

              left: -20rpx;

              background: rgba(0, 0, 0, 0);

            }

            image {

              width: 44rpx;

              height: 44rpx;

              margin-right: 8rpx;

            }

            text {

              font-size: 26rpx;

              font-family: PingFangSC-Regular, PingFang SC;

              font-weight: 400;

              color: #666666;

            }

          }

        }

        .item_d_right {

          width: 136rpx;

          height: 56rpx;

          line-height: 56rpx;

          text-align: center;

          background: #0055ff;

          border-radius: 4rpx;

          font-size: 24rpx;

          font-family: PingFangSC-Regular, PingFang SC;

          font-weight: 400;

          color: #ffffff;

        }

      }

    }

  }

}

</style>