uni_mattress/sleep/pages/my/index.vue

<template>
  <view class="my-container">
    <view class="container-bg"></view>

    <cu-custom bgColor="#fff">
      <view slot="content" style="color: #FFFFFF">UU睡眠</view>
    </cu-custom>

    <view class="flex-col justify-start page">
      <view class="flex-col group_2 space-y-10">

        <view class="flex-col justify-start items-start my_device_header">

          <view class="flex-col section pos">

            <view class="flex-col my_device_profile">
              <view @click="handleAuth" class="flex-row space-x-19">
                <image v-if="userInfo.face" class="shrink-0 image_5" :src="userInfo.face"/>
                <image v-else class="shrink-0 image_5" src="../../static/mine/myAvatar.png"/>
                <view class="flex-col flex-auto self-center space-y-14">
                  <view class="flex-row space-x-8">
                    <text class="text_2">{{ userInfo.nickname }}</text>
                    <view class="flex-row shrink-0 section_3 space-x-4">
                      <image
                          class="shrink-0 image_7"
                          src="../../static/mine/myIconEdit.png"
                      />
                      <text class="font_2">编辑</text>
                    </view>
                  </view>
                  <view class="flex-row items-center space-x-6">
                    <image
                        class="image_8"
                        src="../../static/mine/myIconPhone.png"
                    />
                    <text class="font_3 text_3">{{ userInfo.mobile }}</text>
                  </view>
                </view>
                <image
                    class="shrink-0 self-start image_6"
                    src="../../static/mine/myIconAlert.png"
                />
              </view>
              <view class="flex-row justify-between relative group_4">
                <view class="flex-col justify-start items-center self-center text-wrapper">
                  <text class="font_4">重新绑定</text>
                </view>
              </view>
            </view>
            <!--				<view class="flex-col items-center text-center power-module">-->
            <!--					<image-->
            <!--					  class="image_9"-->
            <!--					  src="../../static/mine/myIconPower.png"-->
            <!--					/>-->
            <!--					<text class="self-end text_4">1,548</text>-->
            <!--				</view>-->

          </view>

        </view>

        <view class="flex-col group_5 space-y-30">
          <view class="flex-col space-y-10 my_devices">

            <view class="flex-row justify-between">
              <text class="font_1 text_5 pos_2">我的设备</text>
              <view class="flex-row items-center section_4 pos_3">
                <text class="font_5" @click="bindShow = 'show'">添加设备</text>
                <image
                    class="shrink-0 image_7"
                    src="../../static/mine/myIconAdd.png"
                />
              </view>
            </view>
            <view v-if="deviceList.length > 0" v-for="(item, index) in deviceList" :key="index"
                  class="flex-col my_device_default space-y-6">
              <view class="flex-row justify-between items-end">
                <view class="flex-col space-y-16">
                  <view class="flex-row space-x-8">
                    <text class="font_4 text_6 text_8">设备</text>
                    <text class="font_6">睡眠床垫</text>
                  </view>
                  <view class="flex-row items-baseline">
                    <text class="font_3 text_6 text_9">SN</text>
                    <text class="font_3 text_10">{{ item.imei }}</text>
                    <text class="font_8 text_11 text_12" @click="deleteDevice(item.id, index, item.imei)">取消绑定</text>
                  </view>
                </view>
                <view class="flex-col group_6 space-y-6">
                  <text class="self-center font_2 text_6 text_7">香睡指数</text>
                  <text class="self-start font_7">{{ item.score_value }}</text>
                </view>
              </view>
              <text class="self-end font_9">{{ item.score_desc }}</text>
              <view class="flex-row items-center space-x-20">
                <view class="flex-row items-center flex-auto">
                  <!--		              <image-->
                  <!--		                class="shrink-0 image_10"-->
                  <!--		                src="../../static/mine/myIconDefault.png"-->
                  <!--		              />-->
                  <!--		              <text class="font_5 text_13">设为默认</text>-->
                  <image
                      class="shrink-0 image_10 image_11"
                      src="../../static/mine/myIconLink.png"
                  />
                  <text @click="handleShareData" class="font_5 text_14">远程关爱</text>
                  <image
                      class="shrink-0 image_10 image_12"
                      src="../../static/mine/myIconSetting.png"
                  />
                  <text class="font_5 text_15" @click="handleAlertSetting(item.imei)">报警设置</text>
                </view>
                <text class="font_10 text_16">{{ item.report_time }}</text>
              </view>
            </view>
          </view>

          <view class="flex-col space-y-8">
            <!--		        <view class="flex-row justify-between">-->
            <!--		          <text class="font_1">语音短信</text>-->
            <!--		          <view class="flex-row items-center section_7">-->
            <!--		            <text class="font_5">购买套餐</text>-->
            <!--		            <image-->
            <!--		              class="shrink-0 image_7"-->
            <!--		              src="../../static/mine/myIconBuy.png"-->
            <!--		            />-->
            <!--		          </view>-->
            <!--		        </view>-->

            <view class="flex-col space-y-30">


              <!--		          <view class="flex-row justify-between my_record">-->
              <!--		            <view class="flex-col self-center space-y-14">-->
              <!--		              <view class="flex-row items-center space-x-6">-->
              <!--		                <image-->
              <!--		                  class="shrink-0 image_10"-->
              <!--		                  src="../../static/mine/myIconMoney.png"-->
              <!--		                />-->
              <!--		                <text class="font_11">消费记录</text>-->
              <!--		              </view>-->
              <!--		              <view class="flex-row items-center space-x-6">-->
              <!--		                <image-->
              <!--		                  class="shrink-0 image_10"-->
              <!--		                  src="../../static/mine/myIconPromt.png"-->
              <!--		                />-->
              <!--		                <text class="font_11">提醒记录</text>-->
              <!--		              </view>-->
              <!--		            </view>-->
              <!--		            <view class="self-center section_9"></view>-->
              <!--		            <view class="flex-col self-center space-y-6">-->
              <!--		              <view class="flex-row space-x-4">-->
              <!--		                <text class="self-center font_12 text_25">36</text>-->
              <!--		                <text class="self-start font_11 text_26">次</text>-->
              <!--		              </view>-->
              <!--		              <text class="font_13">剩余短信</text>-->
              <!--		            </view>-->
              <!--		            <view class="flex-col self-start group_12 space-y-6">-->
              <!--		              <view class="flex-row group_13">-->
              <!--		                <text class="self-center font_12">17</text>-->
              <!--		                <text class="self-start font_11 text_27">次</text>-->
              <!--		              </view>-->
              <!--		              <text class="self-start font_13">剩余语音</text>-->
              <!--		            </view>-->
              <!--		          </view>-->


              <view class="flex-col justify-start my_settings">
                <view class="grid">
                  <!--		              <view class="flex-col items-center relative grid-item space-y-8">-->
                  <!--		                <image-->
                  <!--		                  class="image_17"-->
                  <!--		                  src="../../static/mine/myWifi.png"-->
                  <!--		                />-->
                  <!--		                <text class="font_13 text_28">WIFI连接</text>-->
                  <!--		              </view>-->
                  <view class="flex-col items-center relative grid-item space-y-8">
                    <image
                        class="image_17"
                        src="../../static/mine/myAnnouncement.png"
                    />
                    <text class="font_13 text_28">免责声明</text>
                  </view>
                  <view class="flex-col items-center relative grid-item space-y-8">
                    <image
                        class="image_17"
                        src="../../static/mine/myProduct.png"
                    />
                    <text class="font_13 text_28">产品介绍</text>
                  </view>
                  <view class="flex-col items-center relative grid-item space-y-8">
                    <image
                        class="image_17"
                        src="../../static/mine/myHelp.png"
                    />
                    <text class="font_13 text_28">使用帮助</text>
                  </view>
                  <view class="flex-col items-center relative grid-item space-y-8">
                    <image
                        class="image_17"
                        src="../../static/mine/mySecret.png"
                    />
                    <text class="font_13 text_28">隐私政策</text>
                  </view>
                  <view class="flex-col items-center relative grid-item space-y-8">
                    <image
                        class="image_17"
                        src="../../static/mine/myUserAgree.png"
                    />
                    <text class="font_13 text_28">用户协议</text>
                  </view>
                  <!--		              <view class="flex-col items-center relative grid-item space-y-8">-->
                  <!--		                <image-->
                  <!--		                  class="image_17"-->
                  <!--		                  src="../../static/mine/myState.png"-->
                  <!--		                />-->
                  <!--		                <text class="font_13 text_28">配网说明</text>-->
                  <!--		              </view>-->
                  <!--		              <view class="flex-col items-center relative grid-item space-y-8">-->
                  <!--		                <image-->
                  <!--		                  class="image_17"-->
                  <!--		                  src="../../static/mine/myOrder.png"-->
                  <!--		                />-->
                  <!--		                <text class="font_13 text_28">我的订单</text>-->
                  <!--		              </view>-->
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="cu-modal" :class="bindShow?'show':''">
      <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end">
          <view style="color: black" class="content">设备绑定</view>
          <view class="action" @tap="bindShow=false">
            <text class="cuIcon-close text-red"></text>
          </view>
        </view>
        <view class="">
          <form>
            <view class="cu-form-group solid-bottom">
              <view class="title">扫描二维码</view>
              <input type="text" v-model="bindSn" class="text-left"/>
              <text class="cuIcon-scan text-xxl text-green" style="font-size: 50rpx;"
                    @click="scan"></text>
            </view>
          </form>
        </view>
        <view class="cu-bar bg-white justify-end">
          <view class="action">
            <button class="cu-btn bg-green margin-left" @tap="bindDevice">确定</button>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
import Storage from '@/utils/storage'
import * as Foundation from '@/ui-utils/Foundation'
import * as API_deviceMemberBind from '@/api/device_member_bind'
import * as API_SLEEP_REPORT from '@/api/sleep_report'

export default {
  data() {
    return {
      deviceList: [],
      unionId: '',
      memberId: '',
      bindSn: '',
      bindShow: false,
      userInfo: null
    };
  },
  mounted() {
    this.memberId = Storage.getItem('uid')
    if (this.memberId) {
      this.userInfo = Storage.getItem('userInfo')
      this.deviceList = Storage.getItem('myBindDevices')
      this.unionId = this.userInfo.union_id
      if (this.deviceList) {
        console.log('this.deviceList===', this.deviceList)
        this.API_getNewReport()
      }
    }
  },
  methods: {
    API_getNewReport() {
      const _this = this
      let imei = ''
      this.deviceList.forEach(item => {
        imei += item.imei + ','
      })
      imei = imei.substring(0, imei.length - 1)
      API_SLEEP_REPORT.getNewReportBySn({sns: imei, unionId: this.unionId}).then(res => {
        res.forEach(t => {
          _this.deviceList.forEach(tt => {
            if (t.sn === tt.imei) {
              _this.$set(tt, 'report_time', Foundation.unixToDate(t.report_time, "yyyy/MM/dd"))
              _this.$set(tt, 'score_value', t.score_value)
              _this.$set(tt, 'score_desc', t.score_desc)
            }
          })
        })
        console.log(_this.deviceList)
      })
    },
    API_getDeviceList() {
      const _this = this
      API_deviceMemberBind.getDeviceByDtypeAndMemberId({dtype: '睡眠床垫', memberId: this.memberId}).then(res => {
        if (res.length > 0) {
          _this.deviceList = res
          Storage.setItem("nowChangeDevice", res[0].imei)
          Storage.setItem("myBindDevices", res)
          _this.API_getNewReport()
        }
      })
    },
    handleAuth() {
      if (!this.memberId) {
        uni.navigateTo({
          url: '/pages/auth/auth'
        })
      } else {
        console.log('修改...')
      }
    },
    handleShareData() {
      uni.navigateTo({
        url: '/pages/shareUser/shareUser'
      })
    },
    handleAlertSetting(imei) {
      uni.navigateTo({
        url: "/pages/alertSetting/alertSetting?imei=" + imei
      });
    },
    // 扫描条码
    scan() {
      let _this = this
      uni.scanCode({
        success: function (res) {
          console.log(res, res.result.length)
          if (res.result.length > 20) {
            if (res.scanType === 'QR_CODE') {
              const urlStr = res.result
              const qs = Foundation.getQueryObject(urlStr)
              if (qs.mac) {
                _this.bindSn = qs.mac
              } else {
                uni.showToast({
                  title: '请扫码正确的睡眠床垫二维码',
                  icon: 'none'
                });
              }
            } else {
              _this.bindSn = res.result
            }
          } else {
            _this.bindSn = res.result
          }
        },
        fail: (err) => {
          console.log(err)
          // #ifdef MP
          uni.getSetting({
            success: (res) => {
              let authStatus = res.authSetting['scope.camera'];
              if (!authStatus) {
                uni.showModal({
                  title: '授权失败',
                  content: 'app需要使用您的相机，请在设置界面打开相关权限',
                  success: (res) => {
                    if (res.confirm) {
                      uni.openSetting()
                    }
                  }
                })
              }
            }
          })
          // #endif
        }
      })
    },
    bindDevice() {
      const params = {
        imei: this.bindSn,
        memberId: this.memberId,
        dtype: '睡眠床垫'
      }
      this.bindShow = false
      let _this = this
      API_deviceMemberBind.bindDeviceByDtype(params).then(res => {
        if (res.success) {
          _this.bindSn = ''
          uni.showToast({
            title: '绑定成功',
          })
          _this.API_getDeviceList()
        } else {
          uni.showToast({
            title: res.message,
            icon: 'none'
          })
        }
      })
    },
    // 删除绑定的设备
    deleteDevice(id, index, imei){
      const _this = this
      uni.showModal({
        title: '提示',
        content: '确定要解绑吗',
        success: function (r) {
          if (r.confirm) {
            API_deviceMemberBind.delSleepMattress({id: id, imei: imei}).then(res=>{
              uni.showToast({
                title: '解绑成功',
                icon: 'none'
              })
              _this.deviceList.splice(index, 1)
              if (_this.deviceList.length > 0) {
                Storage.setItem("nowChangeDevice", _this.deviceList[0].imei)
                Storage.setItem("myBindDevices", _this.deviceList)
              } else {
                Storage.removeItem('nowChangeDevice')
                Storage.removeItem('myBindDevices')
              }
            })
          }
        }
      })
    },

  }
};
</script>

<style lang="scss" scoped>
.power-module {
  position: absolute;
  right: 1.63rem;
  top: 10rem;

  .image_9 {
    width: 22px;
    height: 22px;
  }

  .text_4 {
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0px;
    line-height: 16px;
    color: rgba(255, 255, 255, 1);
    vertical-align: top;
    text-align: center;
    margin-top: 0.3rem;
  }
}

.container-bg {
  position: fixed;
  left: -130px;
  top: -130px;
  width: 480px;
  height: 344px;
  opacity: 1;
  border-radius: 63px;
  -webkit-transform: rotate(-315deg);
  transform: rotate(-315deg);
  background: linear-gradient(90deg, rgba(86, 17, 247, 0.5) 0%, #4d9efa 100%);
}

.page {
  padding-bottom: 3.13rem;
  background-color: #000000;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;

  .group_2 {
    padding-bottom: 1.25rem;
    height: 61.06rem;
    overflow-y: auto;

    .my_device_header {
      padding: 0.25rem 0 2.75rem;
      overflow-x: hidden;
      z-index: 100;

      .image {
        margin-left: -6.38rem;
        border-radius: 3.94rem;
        width: 32.63rem;
        height: 25.44rem;
      }

      .section {
        // background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/649415135a7e3f0310661c1e/649415b654fe0000116ae544/16874493388853192993.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;

        .section_2 {
          padding: 1.13rem 0.88rem 0.75rem;
          background-color: #ffffff4d;

          .space-x-6-reverse {
            & > view:not(:last-child),
            & > text:not(:last-child),
            & > image:not(:last-child) {
              margin-right: 0.38rem;
            }

            .image_2 {
              width: 1.06rem;
              height: 0.69rem;
            }

            .image_3 {
              width: 0.94rem;
              height: 0.69rem;
            }

            .image_4 {
              width: 1.5rem;
              height: 0.72rem;
            }
          }

          .text {
            font-size: 1.16rem;
          }
        }

        .space-y-32 {
          & > view:not(:first-child),
          & > text:not(:first-child),
          & > image:not(:first-child) {
            margin-top: 2rem;
          }
        }

        .my_device_profile {
          margin-top: 1.5rem;
          padding-left: 2.19rem;
          padding-right: 1.5rem;
          height: 6.09rem;

          .space-x-19 {
            & > view:not(:first-child),
            & > text:not(:first-child),
            & > image:not(:first-child) {
              margin-left: 1.19rem;
            }

            .image_5 {
              border-radius: 50%;
              width: 4.69rem;
              height: 4.69rem;
            }

            .image_6 {
              margin-top: 0.69rem;
              width: 1.16rem;
              height: 1.25rem;
            }
          }

          .group_4 {
            margin-top: -0.31rem;
            padding: 0 1.13rem;

            .text-wrapper {
              margin-left: 4.63rem;
              padding: 0.38rem 0;
              background-color: #ffffff66;
              border-radius: 6.25rem;
              width: 4.81rem;
              height: 1.5rem;
            }

            .image_9 {
              margin-top: 0.38rem;
              width: 1.31rem;
              height: 1.31rem;
            }
          }
        }
      }

      .text_5 {
        line-height: 1.03rem;
      }

      .pos_2 {
        position: absolute;
        left: 1.28rem;
        bottom: 0;
      }

      .section_4 {
        padding: 0.13rem 0.25rem 0.13rem 0.5rem;
        border-radius: 0.56rem;
        border: solid 0.063rem #4d9efa;
      }

      .pos_3 {
        position: absolute;
        right: 1.25rem;
        top: 26.28rem;
      }
    }

    .group_5 {
      padding: 0 1.25rem;

      .my_devices {
        .section_4 {
          padding: 0.13rem 0.25rem 0.13rem 0.5rem;
          border-radius: 0.56rem;
          border: solid 0.063rem #4d9efa;
        }
      }

      .space-y-8 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-top: 0.5rem;
        }

        .section_7 {
          padding: 0.19rem 0.25rem 0 0.5rem;
          border-radius: 0.56rem;
          height: 1.13rem;
          border: solid 0.063rem #4d9efa;
        }
      }
    }

    .space-y-30 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-top: 1.88rem;
      }

      z-index: 100;

      .my_record {
        padding: 1rem 1.25rem;
        background-color: #1241b8cc;
        border-radius: 1rem;

        .section_9 {
          background-color: #f2f2f2;
          width: 0.063rem;
          height: 2.5rem;
        }

        .group_12 {
          width: 3.78rem;

          .group_13 {
            padding: 0 0.13rem;

            .text_27 {
              margin-top: 0.5rem;
            }
          }
        }
      }

      .my_settings {
        padding: 0.63rem 0;
        background-color: #1241b8cc;
        border-radius: 1rem;

        .grid {
          padding: 0 1.06rem;
          height: 14.81rem;
          display: grid;
          grid-template-columns: repeat(4, 1fr);

          .grid-item {
            padding: 0.63rem 0;

            .image_17 {
              border-radius: 1.25rem;
              width: 2.5rem;
              height: 2.5rem;
            }

            .text_28 {
              opacity: 0.99;
            }
          }
        }
      }
    }

    .space-x-8 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-left: 0.5rem;
      }

      .text_2 {
        color: #ffffff;
        font-size: 1.25rem;
        font-family: PingFangSC;
        line-height: 1.16rem;
      }

      .section_3 {
        padding: 0.25rem 0.63rem;
        background-color: #ffffff26;
        border-radius: 0.63rem;
        height: 1.25rem;
      }

      .text_8 {
        line-height: 0.78rem;
      }

      .text_20 {
        line-height: 0.63rem;
      }
    }

    .font_4 {
      font-size: 0.88rem;
      font-family: PingFangSC;
      line-height: 0.81rem;
      color: #ffffff;
    }

    .font_3 {
      font-size: 0.88rem;
      font-family: PingFangSC;
      line-height: 0.59rem;
      color: #ffffff;
    }

    .text_6 {
      opacity: 0.5;
    }

    .font_2 {
      font-size: 0.63rem;
      font-family: PingFangSC;
      line-height: 0.59rem;
      color: #ffffff;
    }

    .font_5 {
      font-size: 0.75rem;
      font-family: PingFangSC;
      line-height: 0.69rem;
      color: #4d9efa;
    }

    .font_6 {
      font-size: 0.88rem;
      font-family: PingFangSC;
      line-height: 0.81rem;
      color: #d8d8d8;
    }

    .font_1 {
      font-size: 1.13rem;
      font-family: PingFangSC;
      line-height: 1.06rem;
      color: #ffffff;
    }

    .image_7 {
      width: 0.63rem;
      height: 0.63rem;
    }

    .space-y-14 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-top: 0.88rem;
      }

      .space-x-6 {
        & > view:not(:first-child),
        & > text:not(:first-child),
        & > image:not(:first-child) {
          margin-left: 0.38rem;
        }

        .image_8 {
          width: 0.88rem;
          height: 0.88rem;
        }

        .text_3 {
          line-height: 0.63rem;
        }
      }
    }

    .space-x-4 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-left: 0.25rem;
      }

      .text_25 {
        line-height: 1.09rem;
      }

      .text_26 {
        margin-top: 0.5rem;
      }
    }

    .font_11 {
      font-size: 0.75rem;
      font-family: PingFangSC;
      line-height: 0.69rem;
      color: #ffffff;
    }

    .font_12 {
      font-size: 1.5rem;
      font-family: PingFangSC;
      line-height: 1.06rem;
      color: #ffffff;
    }
  }

  .space-y-10 {
    & > view:not(:first-child),
    & > text:not(:first-child),
    & > image:not(:first-child) {
      margin-top: 0.63rem;
    }

    .my_device_default {
      padding: 0.63rem 0.75rem 0.63rem 1.25rem;
      background-color: #1241b8cc;
      border-radius: 1rem;

      .group_6 {
        margin-bottom: 0.25rem;
        width: 3.56rem;

        .text_7 {
          line-height: 0.56rem;
        }
      }
    }

    .my_device {
      padding-bottom: 0.63rem;
      background-color: #1241b8cc;
      border-radius: 1rem;

      .group_7 {
        width: 10.84rem;

        .group_8 {
          width: 3.09rem;

          .group_9 {
            padding-top: 1.63rem;

            .text_18 {
              line-height: 0.78rem;
            }

            .image_13 {
              width: 2.38rem;
              height: 2.38rem;
            }

            .pos_4 {
              position: absolute;
              left: 0;
              bottom: 0;
            }
          }

          .text_19 {
            line-height: 0.63rem;
          }
        }
      }

      .group_10 {
        margin-right: 1.25rem;

        .text_17 {
          line-height: 0.56rem;
        }
      }

      .text_21 {
        margin-right: 0.75rem;
      }

      .group_11 {
        padding-left: 1.25rem;
        padding-right: 1rem;

        .image_14 {
          width: 0.81rem;
          height: 0.81rem;
        }

        .text_22 {
          margin-left: 0.13rem;
        }

        .image_15 {
          margin-left: 0.88rem;
        }

        .text_23 {
          margin-left: 0.13rem;
        }

        .image_16 {
          margin-left: 0.88rem;
        }

        .text_24 {
          margin-left: 0.13rem;
        }
      }
    }

    .space-y-16 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-top: 1rem;
      }

      .text_9 {
        line-height: 0.63rem;
      }

      .text_10 {
        margin-left: 1.25rem;
        line-height: 0.63rem;
      }

      .font_8 {
        font-size: 0.63rem;
        font-family: PingFangSC;
        line-height: 0.59rem;
        color: #a4caf5;
      }

      .text_11 {
        text-decoration: underline;
      }

      .text_12 {
        margin-left: 0.5rem;
      }
    }

    .font_7 {
      font-size: 3rem;
      font-family: PingFangSC;
      line-height: 2.19rem;
      color: #ffffff;
    }

    .font_9 {
      font-size: 0.88rem;
      font-family: PingFangSC;
      line-height: 0.81rem;
      color: #4d9efa;
    }

    .space-x-20 {
      & > view:not(:first-child),
      & > text:not(:first-child),
      & > image:not(:first-child) {
        margin-left: 1.25rem;
      }

      .text_13 {
        margin-left: 0.13rem;
      }

      .image_11 {
        margin-left: 0.88rem;
      }

      .text_14 {
        margin-left: 0.13rem;
      }

      .image_12 {
        margin-left: 0.88rem;
      }

      .text_15 {
        margin-left: 0.13rem;
      }

      .text_16 {
        margin-right: 0.13rem;
      }
    }

    .font_10 {
      font-size: 0.63rem;
      font-family: PingFangSC;
      line-height: 0.5rem;
      color: #4d9efa;
    }
  }

  .image_10 {
    width: 0.75rem;
    height: 0.75rem;
  }

  .space-y-6 {
    & > view:not(:first-child),
    & > text:not(:first-child),
    & > image:not(:first-child) {
      margin-top: 0.38rem;
    }
  }

  .font_13 {
    font-size: 0.63rem;
    font-family: PingFangSC;
    line-height: 0.59rem;
    color: #4d9efa;
  }
}

.my-container {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #000000;

  .mask-container {
    overflow: hidden;
    position: absolute;
    height: 30%;
    width: 100%;
    background-size: cover;
    background-position: center;

    &:after {
      content: '';
      position: absolute;
      width: 130%;
      height: 130%;
      left: 0;
      top: 0;
      z-index: 1;
      filter: blur(10px);
      transform: translate(-3rem, -3rem);
      background: inherit;
      background-size: 100% 100%;
    }

    .cover-mask {
      position: absolute;
      height: 100%;
      width: 100%;
      z-index: 3;
      background-color: rgba(0, 0, 0, 0.8);
    }

    .head-img {
      width: 108px;
      height: 108px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 99;
      border-radius: 50%;
      overflow: hidden;
    }

    .username {
      position: absolute;
      left: 50%;
      bottom: 20px;
      transform: translateX(-50%);
      z-index: 99;
      color: #fff;
      font-size: 36 rpx;
    }
  }

  .recommend-main {
    width: 100%;
    position: absolute;
    top: 30%;
    bottom: 50px;

    .tabs {
      box-shadow: 0 0 0.8px rgb(0, 0, 0 / 10%);
      width: 100%;
      height: 45px;
      align-items: center;

      .tab-item {
        flex: 1;
        font-size: 32 rpx;
        text-align: center;
        color: rgba(0, 0, 0, 0.5);

        &.active {
          color: rgb(248, 78, 81);
        }
      }
    }

    .music-title {
      padding-left: 20px;
      margin: 15px 0;
      box-sizing: border-box;
      color: #000;
      font-size: 32 rpx;
      font-weight: 600;

      .playIcon {
        margin-right: 8px;
        font-size: 40 rpx;
      }

      .light-text {
        font-size: 24 rpx;
        margin-left: 6px;
        color: rgba(0, 0, 0, 0.5);
      }
    }

    .music-item {
      height: 70px;
      box-sizing: border-box;
      padding: 0 20px;
      align-items: center;
      margin-bottom: 10px;
      position: relative;

      &:last-of-type {
        margin-bottom: 0;
      }

      &.active {
        background-image: linear-gradient(to right, rgba(247, 73, 79, 0.1), rgba(247, 73, 79, 0.05));

        .music-info {
          .music-name,
          .small-icon,
          .music-singer {
            color: #f84e51 !important;
          }

          &::before {
            content: '';
            width: 4px;
            height: 65px;
            background-image: linear-gradient(to bottom, rgb(253, 117, 102), rgb(247, 73, 79));
            position: absolute;
            left: 0px;
            top: 3px;
          }
        }
      }

      .music-img {
        width: 58px !important;
        height: 58px !important;
        border-radius: 6px;
      }

      .music-info {
        margin-right: 15px;
        margin-left: 15px;
        width: calc(100vw - 135px);
        text-align: left;

        .music-name {
          font-size: 30 rpx;
          margin-bottom: 7px;
          color: #000;
        }

        .music-singer {
          color: rgba(0, 0, 0, 0.5);
          font-size: 24 rpx;
          align-items: center;

          .small-icon {
            margin-right: 6px;
            transform: scale(0.9);
            color: rgba(0, 0, 0, 0.5);
            font-size: 12px;
            padding: 1px 3px;
            border: 1px solid rgba(0, 0, 0, 0.2);
            border-radius: 4px;
          }
        }
      }
    }
  }
}
</style>