<script setup lang="ts">
import { useMemberStore } from '@/stores'
import { http } from '@/utils/http'
const memberStore = useMemberStore()
const getData = async () => {
  const res = await http<string[]>({
    url: `/home/banner`,
    method: 'GET',
    header: {},
  })
  console.log(res)
}
</script>

<template>
  <view class="bg">
    <view class="my_info">
      <view>
        <image
          class="user_icon"
          src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao.jpg"
        />
      </view>
      <view class="user_name">用户登录昵称</view>
    </view>
    <view class="my_tab">
      <view class="my_tab_detail">
        <view>
          <image class="tab_icon" src="../../static/images/shequ.png" />
        </view>
        <view class="tab_des"> 加入社区 </view>
        <view>
          <image class="tab_icon-right" src="../../static/images/right.png" />
        </view>
      </view>
      <view class="my_tab_detail">
        <view>
          <image class="tab_icon" src="../../static/images/fankui.png" />
        </view>
        <view class="tab_des"> 问题反馈 </view>
        <view>
          <image class="tab_icon-right" src="../../static/images/right.png" />
        </view>
      </view>
      <view class="my_tab_detail">
        <view>
          <image class="tab_icon" src="../../static/images/about.png" />
        </view>
        <view class="tab_des"> 关于我们 </view>
        <view>
          <image class="tab_icon-right" src="../../static/images/right.png" />
        </view>
      </view>
      <view class="my_tab_detail">
        <view>
          <image class="tab_icon" src="../../static/images/exit.png" />
        </view>
        <view class="tab_des"> 退出登录 </view>
        <view>
          <image class="tab_icon-right" src="../../static/images/right.png" />
        </view>
      </view>
    </view>
    <view> </view>
    <view> </view>
  </view>
</template>

<style lang="scss">
//
.bg {
  background: url(@/static/images/bg.png) no-repeat;
  background-size: 100% 100%;
  width: 750rpx;
  height: 100vh;
  padding-top: 20vh;
  padding-left: 20rpx;
  padding-right: 20rpx;
  padding-bottom: 40rpx;
}

.my_info {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  background-color: #ffffff;
  padding-top: 15rpx;
  padding-bottom: 20rpx;
  padding-left: 15rpx;
  border-radius: 30rpx;

  // items-align:center;
}

.user_icon {
  margin-right: 30rpx;
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
}

.user_name {
  color: #5aa4ae;
  font-size: 30rpx;
  font-weight: 700;
}

.my_tab {
  background-color: #ffffff;
  margin-top: 40rpx;
  border-radius: 30rpx;
  padding: 10rpx 30rpx;
}

.my_tab_detail {
  margin-top: 40rpx;
  margin-bottom: 40rpx;
  display: flex;
  flex-direction: row;
  align-items: center;

  justify-content: flex-start;
}

.tab_icon {
  width: 40rpx;
  height: 40rpx;
}

.tab_des {
  font-size: 30rpx;
  margin-left: 30rpx;
  flex: 1;
}

.tab_icon-right {
  width: 20rpx;
  height: 30rpx;
}
</style>
