Merge remote-tracking branch 'origin/wl_dev' into swj_dev

pages.config.ts

@@ -30,6 +30,7 @@ export default defineUniPages({
       {
         icon: '/static/tabbar/Parenting.svg',
         iconShow: '/static/tabbar/goods.svg',
+        roundIcon: '/static/tabbar/Polygon.svg',
         pagePath: 'pages/index/index',
         text: '育儿',
         iconType: 'local',
@@ -37,6 +38,7 @@ export default defineUniPages({
       {
         icon: '/static/tabbar/music.svg',
         iconShow: '/static/tabbar/Frame.svg',
+        roundIcon: '/static/tabbar/Polygon.svg',
         pagePath: 'pages/music/music',
         text: '音乐',
         iconType: 'local',
@@ -45,6 +47,7 @@ export default defineUniPages({
       {
         icon: '/static/tabbar/user.svg',
         iconShow: '/static/tabbar/macon.svg',
+        roundIcon: '/static/tabbar/Polygon.svg',
         pagePath: 'pages/myUser/myuser',
         text: '我的',
         iconType: 'local',

src/components/shop-tabbar/shop-tabbar.vue

@@ -2,16 +2,15 @@
   <view class="tab-bar">
     <view
       v-for="(item, index) in tabBar.list"
-      :key="index"
+      :key="item.pagePath"
       :class="['tab-item', { active: currentTab === index }]"
-      @click="selectTabBar(index, item.pagePath)"
+      @click.stop="selectTabBar(index, item.pagePath)"
     >
       <view class="icon-wrapper">
         <view v-if="currentTab === index">
-          <image :src="item.round" class="PolygonIcon"></image>
+          <image :src="item.roundIcon" class="PolygonIcon"></image>
           <image :src="item.iconShow" class="home-item-isShow"></image>
         </view>
-
         <image v-else :src="item.icon" class="home-item-img"></image>
       </view>
       <span class="labelTile">{{ item.text }}</span>
@@ -23,19 +22,18 @@
   import { tabBar } from '@/pages.json'
   import { t } from '@/locale'
   import { useTabbarStore } from '@/store/tabbar'
-  import { ref, watch } from 'vue'
+  import { onMounted, computed } from 'vue'
 
   const tabbarStore = useTabbarStore()
-  const currentTab = ref(0)
+  const currentTab = computed(() => tabbarStore.curIdx)
   function selectTabBar(index: number, url: string) {
     tabbarStore.setCurIdx(index)
-    currentTab.value = index
     uni.switchTab({
       url: `/${url}`,
     })
   }
 
-  onLoad(() => {
+  onMounted(() => {
     // #ifdef APP-PLUS | H5
     uni.hideTabBar({
       fail(err) {
@@ -46,7 +44,7 @@
       },
     })
     const routes = getCurrentPages()
-    const curRoute = routes[routes.length - 1].route
+    const curRoute = routes[routes.length - 1]?.route
     for (let i = 0; i < tabBar.list.length; i++) {
       const { pagePath } = tabBar.list[i]
       if (pagePath === curRoute) {
@@ -59,7 +57,7 @@
   })
 </script>
 
-<style lang="css" scoped>
+<style lang="scss" scoped>
   .tab-bar {
     position: fixed;
     right: 0;
@@ -69,7 +67,6 @@
     align-items: center;
     justify-content: space-around;
     width: 100%;
-    /* height: 160rpx; */
     background: #ffffff;
     box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
   }
@@ -89,13 +86,10 @@
     align-items: center;
     justify-content: center;
     width: 100rpx;
-    /* height: 100rpx; */
     border-radius: 50%;
     transition: all 0.3s ease;
   }
-  /* .tab-item.active {
-    color: #60a5fa;
-  } */
+
   .tab-item.active .icon-wrapper {
     transform: translateY(-48rpx);
   }

src/manifest.json

@@ -33,7 +33,8 @@
           "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
           "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
           "<uses-feature android:name=\"android.hardware.camera\"/>",
-          "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
+          "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>",
+          "<uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\"/>"
         ],
         "minSdkVersion": 30,
         "targetSdkVersion": 30,

src/pages/music/component/musicPlayback.vue

@@ -54,12 +54,14 @@
         </view>
         <!-- 上一曲下一曲播放 -->
         <view class="controls">
+          <!-- 循环播放 -->
           <view class="control-btn" @click="palyCycleBtn">
             <image
               style="width: 32rpx; height: 32rpx"
               src="/src/static/icon/fi-rr-refresh.svg"
             ></image>
           </view>
+          <!-- 上一曲 -->
           <view class="control-btn" @click="previousSongBtn">
             <image
               style="width: 48rpx; height: 32rpx"
@@ -86,12 +88,14 @@
               </view>
             </button>
           </view>
+          <!-- 下一曲 -->
           <view class="control-btn" @click="nextSongBtn">
             <image
-              style="width: 24rpx; height: 32rpx"
+              style="width: 48rpx; height: 32rpx"
               src="/src/static/icon/Group-right.svg"
             ></image>
           </view>
+          <!--  -->
           <view class="control-btn">
             <image
               style="width: 32rpx; height: 32rpx"
@@ -107,8 +111,15 @@
 <script setup>
   import { ref } from 'vue'
   const song = ref({})
+  const audioSrc = ref('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3') // 替换为你的音频文件路径
   const isPlaying = ref(false) // 用来标识播放状态
-
+  const audio = uni.createInnerAudioContext()
+  audio.autoplay = true
+  onLoad((query) => {
+    if (query.songDate) {
+      song.value = JSON.parse(decodeURIComponent(query.songDate))
+    }
+  })
   //   实现返回逻辑
   const goBack = () => {
     uni.navigateBack()
@@ -119,7 +130,8 @@
   }
   // 循环播放
   const palyCycleBtn = () => {
-    console.log('循环播放')
+    audio.loop = true
+    console.log('循环播放', audio.loop)
   }
   // 上一曲
   const previousSongBtn = () => {
@@ -131,15 +143,16 @@
   }
   // 实现播放/暂停切换逻辑
   const togglePlayPause = () => {
+    if (isPlaying.value) {
+      audio.autoplay = true
+      audio.src = audioSrc.value
+      console.log('innerAudioContext0', audio)
+    } else {
+      audio.autoplay = false
+      audio.src = audioSrc.value
+    }
     isPlaying.value = !isPlaying.value
-    console.log('控制播放')
   }
-
-  onLoad((query) => {
-    if (query.songDate) {
-      song.value = JSON.parse(decodeURIComponent(query.songDate))
-    }
-  })
 </script>
 
 <style scoped lang="scss">
@@ -183,7 +196,7 @@
 
   .song-title {
     margin: 0;
-    font-size: 1.5rem;
+    font-size: 40rpx;
     font-weight: 500;
     color: #333;
   }
@@ -214,7 +227,7 @@
   .time-info {
     display: flex;
     justify-content: space-between;
-    font-size: 0.875rem;
+    font-size: 24rpx;
     color: #666;
   }
   //   <!-- 上一曲下一曲播放 -->

src/pages/music/component/musicRecommend.vue

@@ -1,95 +1,75 @@
 <template>
-  <!-- Header -->
-  <view class="header">
-    <view class="header-left">
-      <!-- 播放按钮 -->
-      <view class="play-circle">
-        <image
-          @click="palyBtn"
-          style="width: 48rpx; height: 48rpx"
-          src="/src/static//icon/fi-rr-play-alt.svg"
-        ></image>
+  <view class="bg">
+    <!-- 播放全部 -->
+    <view class="header">
+      <view class="header-left">
+        <!-- 播放按钮 -->
+        <view class="play-circle" @click="palyHeaderBtn">
+          <image
+            style="width: 48rpx; height: 48rpx"
+            src="/src/static//icon/fi-rr-play-alt.svg"
+          ></image>
+        </view>
+        <text class="text-gray">播放全部 (22首)</text>
       </view>
-      <text class="text-gray">播放全部 (22首)</text>
-    </view>
 
-    <!-- 循环播放 -->
-    <view class="header-right">
-      <image
-        @click="cycleBtn"
-        style="width: 32rpx; height: 32rpx"
-        src="/src/static/icon/fi-rr-refresh.svg"
-      ></image>
-      <image style="width: 32rpx; height: 32rpx" src="/src/static/icon/fi-rr-shuffle.svg"></image>
+      <!-- 循环播放 -->
+      <view class="header-right" @click="cycleBtn">
+        <image v-if="isRefresh" class="imgIcon" src="/src/static/icon/fi-rr-refresh.svg"></image>
+        <image v-else class="imgIcon" src="/src/static/icon/fi-rr-shuffle.svg"></image>
+      </view>
     </view>
-  </view>
 
-  <!-- 当前播放 -->
-  <view class="currently-playing">
-    <view class="currently-playing-left">
-      <view class="play-circle">
-        <image
-          @click="palyBtn"
-          style="width: 28rpx; height: 28rpx"
-          src="/src/static//icon/fi-rr-play.svg"
-          v-if="type === 0"
-        ></image>
+    <!-- 当前播放   循环播放-->
+    <view class="currently-playing" v-show="playDom">
+      <view class="currently-playing-left">
+        <view class="play-circle" @click="palyBtn">
+          <image v-if="isRePaly" class="palyIcon" src="/src/static/icon/fi-rr-play.svg"></image>
+          <image v-else class="imgIcon" src="/src/static/icon/fi-rr-pause.svg"></image>
+        </view>
+        <text class="text-paly">继续播放: {{ songTitle }}</text>
+      </view>
+      <view style="display: flex; gap: 80rpx">
         <image
-          @click="palyBtn"
-          style="width: 28rpx; height: 28rpx"
-          src="/src/static//icon/fi-rr-play.svg"
-          v-else
+          @click="cleanBtn"
+          class="imgIcon"
+          src="/src/static/icon/fi-rr-cross-small.svg"
         ></image>
       </view>
-      <text class="text-gray">继续播放: 小燕子(供暖版) - 贝乐虎儿歌贝乐虎儿歌贝乐虎儿歌</text>
     </view>
-    <!-- 循环播放 -->
-    <view style="display: flex; gap: 80rpx">
-      <image
-        @click="cycleBtn"
-        style="width: 32rpx; height: 32rpx"
-        src="/src/static/icon/fi-rr-pause.svg"
-      ></image>
-      <image
-        style="width: 32rpx; height: 32rpx"
-        src="/src/static/icon/fi-rr-cross-small.svg"
-      ></image>
-    </view>
-  </view>
 
-  <!-- 播放列表 -->
-  <view class="playlist">
-    <view v-for="(song, index) in songs" :key="index" class="playlist-item">
-      <view class="album-cover">
-        <view class="cover-inner">
+    <!-- 播放列表 -->
+    <view class="playlist">
+      <view v-for="(song, index) in songs" :key="index" class="playlist-item">
+        <view class="album-cover">
           <image
             style="width: 100rpx; height: 100rpx"
             src="/src/static/icon/fi-rr-big-play.svg"
           ></image>
         </view>
-      </view>
-      <view class="song-details" @click="playFavoriteBtn(song, index)">
-        <text class="song-name">{{ song.name }}</text>
-      </view>
-      <view class="song-controls">
-        <text>{{ song.duration }}</text>
-        <image
-          style="width: 40rpx; height: 40rpx"
-          v-if="type === 0"
-          :src="
-            song.favorite
-              ? '/src/static/icon/fi-rr-heart-grey.svg'
-              : '/src/static/icon/fi-rr-heart.svg'
-          "
-          @click="toggleFavorite(song)"
-        ></image>
+        <view class="song-details" @click="playFavoriteBtn(song, index)">
+          <text class="song-name">{{ song.name }}</text>
+        </view>
+        <view class="song-controls">
+          <text>{{ song.duration }}</text>
+          <image
+            style="width: 40rpx; height: 40rpx"
+            v-if="type === 0"
+            :src="
+              song.favorite
+                ? '/src/static/icon/fi-rr-heart-grey.svg'
+                : '/src/static/icon/fi-rr-heart.svg'
+            "
+            @click="toggleFavorite(song)"
+          ></image>
 
-        <image
-          v-else
-          style="width: 40rpx; height: 40rpx"
-          src="/src/static/icon/fi-rr-heart.svg"
-          @click="toggHeartCancel(song)"
-        ></image>
+          <image
+            v-else
+            style="width: 40rpx; height: 40rpx"
+            src="/src/static/icon/fi-rr-heart.svg"
+            @click="toggHeartCancel(song)"
+          ></image>
+        </view>
       </view>
     </view>
   </view>
@@ -97,11 +77,11 @@
 
 <script setup>
   import { ref } from 'vue'
-  import musicPlayback from './musicPlayback.vue'
+
+  // 综合还是收藏
   const props = defineProps({
     type: {
       type: Number,
-      // eslint-disable-next-line vue/require-valid-default-prop
       default: true,
     },
   })
@@ -119,16 +99,35 @@
     { name: '世上只有妈妈好', duration: '3:35', favorite: false },
     { name: '蜗牛与黄鹂鸟', duration: '3:35', favorite: true },
   ])
-  // 播放
+  const isRefresh = ref(true) // 循环
+  const isRePaly = ref(true) // 播放暂停切换
+  const playDom = ref(true)
+  const songTitle = ref('')
+  // 播放 暂停
+  const palyHeaderBtn = () => {
+    console.log(111, '播放', '暂停')
+  }
+  // 播放 暂停
   const palyBtn = () => {
-    console.log(111, '播放')
+    isRePaly.value = !isRePaly.value
+    console.log(111, '播放', '暂停')
   }
   // 循环播放
   const cycleBtn = () => {
+    isRefresh.value = !isRefresh.value
     console.log(111, '循环播放')
   }
+  // 清除当前播放DOM
+  const cleanBtn = () => {
+    playDom.value = false
+  }
   // 当前列表
   const playFavoriteBtn = (song, index) => {
+    console.log(222)
+
+    playDom.value = true
+    songTitle.value = song.name
+    console.log(song, 'songsong')
     const songData = encodeURIComponent(JSON.stringify(song))
     uni.navigateTo({
       url: `/pages/music/component/musicPlayback?songDate=${songData}`,
@@ -148,67 +147,59 @@
   })
 </script>
 
-<style scoped>
+<style scoped lang="scss">
   .header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     border-bottom: 2rpx solid #f0f0f0;
-  }
+    padding: 16rpx 32rpx;
+    background: #fff;
 
-  .header-left {
-    display: flex;
-    align-items: center;
+    .header-left {
+      display: flex;
+      align-items: center;
+    }
   }
   .play-circle {
     display: flex;
-    /* justify-content: center; */
     align-items: center;
-    width: 70rpx;
     height: 100rpx;
   }
-  .orange-icon {
-    margin-right: 16rpx;
-    color: #f97316;
-  }
 
   .text-gray {
-    display: flex;
-    align-items: center;
-    width: 440rpx;
+    padding-left: 25rpx;
+    font-size: 32rpx;
+    color: #333;
     overflow: hidden;
-    font-family: 'PingFang SC';
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .text-paly {
+    padding-left: 25rpx;
     font-size: 24rpx;
-    font-style: normal;
-    font-weight: 400;
     color: #333;
+    overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
-
-  .header-right {
-    display: flex;
-    gap: 32rpx;
-  }
-
-  .gray-icon {
-    color: #6b7280;
-    cursor: pointer;
-  }
-  /* 播发 */
+  /* 播放 */
   .currently-playing {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    padding: 0rpx 32rpx;
+    background: #fff;
+    border-bottom: 2rpx solid #f0f0f0;
+    .currently-playing-left {
+      display: flex;
+      align-items: center;
+    }
   }
 
-  .currently-playing-left {
-    display: flex;
-    align-items: center;
-  }
   /* 列表 */
   .playlist {
-    height: calc(100vh - 630rpx);
+    height: calc(100vh - 620rpx);
     overflow: auto;
   }
   .playlist::-webkit-scrollbar {
@@ -217,13 +208,9 @@
   .playlist-item {
     display: flex;
     align-items: center;
-    padding: 24rpx 0px;
-    cursor: pointer;
     border-bottom: 2rpx solid #f0f0f0;
-  }
-
-  .playlist-item:hover {
-    background-color: #f9fafb;
+    padding: 16rpx 32rpx;
+    background: #fff;
   }
 
   .album-cover {
@@ -233,22 +220,12 @@
     overflow: hidden;
   }
 
-  .cover-inner {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-  }
-
   .song-details {
     flex: 1;
   }
 
   .song-name {
-    font-family: 'PingFang SC';
     font-size: 32rpx;
-    font-style: normal;
-    font-weight: 400;
     color: #333;
   }
 
@@ -257,8 +234,14 @@
     gap: 32rpx;
     align-items: center;
     font-size: 24rpx;
-    font-style: normal;
-    font-weight: 400;
-    color: var(--999, #999);
+    color: #999;
+  }
+  .imgIcon {
+    width: 32rpx;
+    height: 32rpx;
+  }
+  .palyIcon {
+    width: 28rpx;
+    height: 28rpx;
   }
 </style>

src/pages/music/music.vue

@@ -7,7 +7,6 @@
   },
 }
 </route>
-<script setup lang="ts"></script>
 <template>
   <view>
     <view class="music-search">
@@ -44,16 +43,25 @@
 <style scoped lang="scss">
   .music-search {
     display: flex;
-    flex: 1 0 0;
-    gap: 20rpx;
-    align-items: center;
-    padding: 20rpx 0px;
   }
   .wd-search {
     width: 100%;
   }
   .music-recommend {
-    padding: 32rpx;
     overflow: auto;
+    height: calc(100vh - 320rpx);
+    background: #f2f2f2;
+  }
+  ::v-deep .wd-search__block {
+    border-radius: 50px;
+  }
+  ::v-deep .wd-search__input {
+    height: 42px;
+  }
+  ::v-deep .wd-tabs__line {
+    background: #f88842;
+  }
+  ::v-deep .is-active {
+    color: #f88842;
   }
 </style>

src/pages/myUser/component/babyInformation.vue

@@ -14,36 +14,37 @@
       title="宝宝信息"
       @deleteBaby="deleteBaby"
     ></headerTitle>
-    <headerTitle v-else title="宝宝信息" @deleteBaby="deleteBaby"></headerTitle>
+    <headerTitle v-else title="宝宝信息"></headerTitle>
 
     <view class="avatar-wrapper">
+      <!-- 头像 -->
       <view class="card-container" @click="photoBtn">
         <view class="info-profile"><image :src="camera" /></view>
-        <view class="info-camera"><image src="/src/static/icon/camera.svg" /></view>
+        <view class="info-camera">
+          <image src="/src/static/icon/camera.svg" />
+        </view>
       </view>
       <view class="card-item">
         <!-- 昵称 -->
-        <view class="section" @click="nicknameBtn">
-          <view class="section-left">
-            <view class="label">宝宝昵称</view>
-            <view class="nickname">
-              <wd-input v-model="nicknameValue" placeholder="请输入昵称" />
-            </view>
-          </view>
-        </view>
+        <ItemForm label="宝宝昵称" :required="true">
+          <template #default>
+            <wd-input v-model="nicknameValue" placeholder="请输入昵称" />
+          </template>
+        </ItemForm>
+
         <!-- 性别 -->
-        <ItemForm label="宝宝性别">
+        <ItemForm label="宝宝性别" :required="true">
           <template #default>
             <pickerUser
               :columns="columns"
               v-model:value="genderValue"
               title="性别"
-              @confirm="handleConfirm"
+              @confirm="handleGenderBtn"
             />
           </template>
         </ItemForm>
         <!-- 生日 -->
-        <ItemForm label="宝宝生日">
+        <ItemForm label="宝宝生日" :required="true">
           <template #default>
             <wd-datetime-picker type="date" v-model="datetimeValue" @confirm="handleTimes" />
           </template>
@@ -56,7 +57,7 @@
               :columns="columnsBlood"
               title="血型"
               v-model:value="bloodValue"
-              @confirm="handleConfirm"
+              @confirm="handleBloodBtn"
             />
           </template>
         </ItemForm>
@@ -66,7 +67,7 @@
       <wd-button @click="addBaby">保存</wd-button>
     </view>
     <view class="baby-Bottom" v-else>
-      <wd-button @click="addBaby">开始育人</wd-button>
+      <wd-button @click="startBtn">开始育儿</wd-button>
     </view>
     <wd-message-box />
   </view>
@@ -78,6 +79,8 @@
   import ItemForm from './item-form.vue'
   import pickerUser from './pickerUser.vue'
   import { formateDate } from '../../../utils/times'
+  import { useMessage } from 'wot-design-uni'
+  const message = useMessage()
   const queryList = ref({}) // 宝宝信息
   const columns = ref(['男', '女', '保密'])
   const columnsBlood = ref(['A型', 'B型', 'AB型', 'O型'])
@@ -87,23 +90,68 @@
   const datetimeValue = ref('') // 生日
 
   const camera = 'https://ai-public.mastergo.com/ai/img_res/d2b4d6b8d90031e1134ed22cfb120081.jpg'
+
   // 删除
-  const deleteBaby = () => {}
-  const handleConfirm = () => {
-    console.log(genderValue.value)
+  const deleteBaby = () => {
+    message
+      .confirm({
+        msg: '确定删除宝宝信息吗？',
+        cancelButtonProps: {
+          customClass: 'custom-one',
+        },
+        confirmButtonProps: {
+          customClass: 'custom-two',
+        },
+      })
+      .then(() => {
+        console.log('点击了确定按钮')
+      })
+      .catch(() => {
+        console.log('点击了取消按钮')
+      })
   }
-  const nicknameBtn = () => {}
+
+  // 换头像
   const photoBtn = () => {
-    console.log('换头像')
+    uni.chooseImage({
+      count: 1, // 最多选择1张
+      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
+      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
+      success: (res) => {
+        console.log(res)
+      },
+      fail: (err) => {
+        console.error(err)
+      },
+    })
   }
-  // 开始育人
-  const addBaby = () => {
-    console.log('开始育人')
+
+  // 性别
+  const handleGenderBtn = () => {
+    console.log(genderValue.value)
+  }
+
+  // 血型
+  const handleBloodBtn = () => {
+    console.log(11)
   }
+
+  // 生日
   const handleTimes = ({ value }) => {
     formateDate(value)
     console.log(formateDate(value), 'formattedDateformattedDate')
   }
+
+  // 保存数据
+  const addBaby = () => {
+    console.log('保存数据')
+  }
+
+  // 开始育人
+  const startBtn = () => {
+    console.log('开始育人')
+  }
+
   // 计算属性判断 queryList 是否为空
   const isQueryListEmpty = computed(() => Object.keys(queryList.value).length === 0)
   onLoad((query) => {
@@ -123,7 +171,7 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 320rpx;
+    height: 240rpx;
     padding-top: 32rpx;
     background: #fff;
   }
@@ -137,8 +185,8 @@
   }
   .info-camera {
     position: absolute;
-    top: 240rpx;
-    left: 410rpx;
+    top: 204rpx;
+    left: 400rpx;
     background: #f88842;
     border-radius: 50%;
     image {
@@ -148,34 +196,6 @@
   }
   .card-item {
     background: #fff;
-    .section {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 32rpx 32rpx 0px 32rpx;
-      border-bottom: 1px solid #f1f5f9;
-    }
-    .section-left {
-      width: 100%;
-      height: 120rpx;
-    }
-
-    .label {
-      height: 60rpx;
-      font-size: 1rem;
-      font-style: normal;
-      font-weight: 400;
-      line-height: 48rpx;
-    }
-    .nickname {
-      display: flex;
-      align-items: center;
-      height: 60rpx;
-      font-family: 'PingFang SC';
-      font-size: 28rpx;
-      font-style: normal;
-      font-weight: 400;
-    }
   }
   .baby-Bottom {
     display: flex;
@@ -187,4 +207,20 @@
   ::v-deep .wd-picker__cell {
     padding: 12rpx 0px;
   }
+  ::v-deep .wd-button {
+    gap: 10px;
+    flex: 1 0 0;
+  }
+  ::v-deep .wd-message-box__actions {
+    .custom-one {
+      color: #000 !important;
+      border: none;
+      background: #fff !important;
+    }
+    .custom-two {
+      color: #fb4848 !important;
+      border: none;
+      background: #fff !important;
+    }
+  }
 </style>

src/pages/myUser/component/headerTitle.vue

@@ -7,6 +7,9 @@
     <view class="header-delete" v-if="isShow" @click="handleDelete">
       <image class="w-[40rpx] h-[40rpx]" src="/src/static/icon/fi-rr-trash.svg"></image>
     </view>
+    <view class="header-delete" v-else>
+      <image class="w-[40rpx] h-[40rpx]"></image>
+    </view>
   </view>
 </template>
 

src/pages/myUser/component/messageCenter.vue

@@ -14,7 +14,10 @@
         <view class="message-time">13:00</view>
         <view class="message-card">
           <view class="message-title">新增关注</view>
-          <view class="message-text">老天爷爷等 (+86 13648597563) 关注宝宝了！</view>
+          <view class="message-text">
+            老天爷爷等 (+86 13648597563) 关注宝宝了！老天爷爷等 (+86 13648597563) 关注宝宝了！
+            老天爷爷等 (+86 13648597563) 关注宝宝了！老天爷爷等 (+86 13648597563) 关注宝宝了！
+          </view>
         </view>
       </view>
     </view>
@@ -43,6 +46,7 @@
   .message-time {
     margin-bottom: 24rpx;
     text-align: center;
+    font-size: 24rpx;
   }
 
   .message-card {
@@ -55,13 +59,14 @@
   .message-title {
     display: flex;
     align-items: center;
-    height: 70rpx;
+    min-height: 70rpx;
     border-bottom: 2rpx solid #f2f2f2;
+    font-weight: 600;
   }
 
   .message-text {
     display: flex;
     align-items: center;
-    height: 70rpx;
+    min-height: 70rpx;
   }
 </style>

src/pages/myUser/component/myBaby.vue

@@ -22,9 +22,9 @@
         <view class="baby-profile">
           <image style="width: 96rpx; height: 96rpx" :src="item.avatarUrl" />
         </view>
-        <view>
+        <view class="babyWarp">
           <view class="baby-font">{{ item.baby }}</view>
-          <text class="baby-year">{{ item.year }}</text>
+          <view class="baby-year">{{ item.year }}</view>
         </view>
       </view>
     </view>
@@ -88,27 +88,35 @@
     overflow: hidden;
     border-radius: 50%;
   }
-  .baby-font {
-    font-size: 28rpx;
-    font-weight: 600;
-    line-height: 44rpx;
-    color: #333;
-  }
-  .baby-year {
-    font-size: 24rpx;
-    line-height: 24rpx;
-    color: #666;
+  .babyWarp {
+    width: 100%;
+    height: 100%;
+    .baby-font {
+      display: flex;
+      align-items: flex-end;
+      font-size: 28rpx;
+      font-weight: 600;
+      height: 48rpx;
+      color: #333;
+    }
+    .baby-year {
+      display: flex;
+      align-items: flex-end;
+      height: 48rpx;
+      font-size: 24rpx;
+      color: #666;
+    }
   }
 
   .baby-Bottom {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 100%;
     height: 128rpx;
+    padding: 16rpx 32rpx;
   }
   ::v-deep .wd-button {
-    background: #ffac78;
-    border-radius: 160rpx;
+    gap: 10px;
+    flex: 1 0 0;
   }
 </style>

src/pages/myUser/component/setFocus.vue

@@ -30,18 +30,37 @@
     <view class="baby-Bottom">
       <wd-button @click="logOutBnt">退出登录</wd-button>
     </view>
+    <wd-message-box />
   </view>
 </template>
 
 <script setup>
   import { ref } from 'vue'
   import headerTitle from './headerTitle.vue'
+  import { useMessage } from 'wot-design-uni'
   const phoneValue = ref('')
+  const message = useMessage()
+
   const cleanBtn = () => {
     console.log('清楚缓存')
   }
-  const logOutBnt = () => {
-    console.log('退出登录')
+  function logOutBnt() {
+    message
+      .confirm({
+        msg: '是否退出登录？',
+        cancelButtonProps: {
+          customClass: 'custom-one',
+        },
+        confirmButtonProps: {
+          customClass: 'custom-two',
+        },
+      })
+      .then(() => {
+        console.log('点击了确定按钮')
+      })
+      .catch(() => {
+        console.log('点击了取消按钮')
+      })
   }
 </script>
 
@@ -82,4 +101,21 @@
     height: 128rpx;
     padding: 16rpx 32rpx;
   }
+  ::v-deep .wd-button {
+    gap: 10px;
+    flex: 1 0 0;
+    color: #fb4848 !important;
+    background: #fff !important;
+    border: 2rpx solid #fb4848;
+  }
+  ::v-deep .wd-message-box__actions {
+    .custom-one {
+      color: #000 !important;
+      border: none;
+    }
+    .custom-two {
+      color: #fb4848 !important;
+      border: none;
+    }
+  }
 </style>

src/pages/user/login.vue

@@ -239,7 +239,11 @@
     display: flex;
     justify-content: center;
     min-height: 100vh;
-    background: linear-gradient(0deg, #fff 0%, #ffac78 100%);
+    // background: linear-gradient(0deg, #fff 0%, #ffac78 100%);
+    background-image: url('/src/static/icon/loginGg.svg');
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
   }
 
   .login-box {

src/static/icon/loginGg.svg

@@ -0,0 +1,48 @@
+<svg width="375" height="812" viewBox="0 0 375 812" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_965_13005)">
+<rect width="375" height="812" fill="white"/>
+<rect width="375" height="812" fill="url(#paint0_linear_965_13005)"/>
+<mask id="mask0_965_13005" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="375" height="812">
+<rect width="375" height="812" fill="url(#paint1_linear_965_13005)"/>
+</mask>
+<g mask="url(#mask0_965_13005)">
+<ellipse cx="161.844" cy="161.844" rx="161.844" ry="161.844" transform="matrix(-0.100546 -0.994933 -0.994933 0.100546 546.555 538.01)" fill="url(#paint2_linear_965_13005)" fill-opacity="0.2"/>
+<ellipse cx="113.799" cy="113.799" rx="113.799" ry="113.799" transform="matrix(-0.659412 0.751782 0.751782 0.659412 53.7467 565.666)" fill="url(#paint3_linear_965_13005)" fill-opacity="0.2"/>
+</g>
+<mask id="mask1_965_13005" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="375" height="812">
+<rect width="375" height="812" fill="url(#paint4_linear_965_13005)"/>
+</mask>
+<g mask="url(#mask1_965_13005)">
+<ellipse cx="151.91" cy="154.528" rx="151.91" ry="154.528" transform="matrix(-0.8158 0.578334 0.578334 0.8158 77.2617 -142.453)" fill="url(#paint5_linear_965_13005)" fill-opacity="0.2"/>
+</g>
+</g>
+<defs>
+<linearGradient id="paint0_linear_965_13005" x1="187.5" y1="812" x2="187.5" y2="0" gradientUnits="userSpaceOnUse">
+<stop stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="#FFEBDF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_965_13005" x1="187.5" y1="812" x2="187.5" y2="0" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#FFE0D8"/>
+</linearGradient>
+<linearGradient id="paint2_linear_965_13005" x1="188.837" y1="108.116" x2="163.065" y2="323.834" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFAC78"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<linearGradient id="paint3_linear_965_13005" x1="30.3849" y1="187.274" x2="173.692" y2="79.2539" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#FFAC78"/>
+</linearGradient>
+<linearGradient id="paint4_linear_965_13005" x1="187.5" y1="812" x2="187.5" y2="0" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1" stop-color="#FFAC78"/>
+</linearGradient>
+<linearGradient id="paint5_linear_965_13005" x1="170.558" y1="199.576" x2="151.91" y2="309.056" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFAC78"/>
+<stop offset="1" stop-color="white"/>
+</linearGradient>
+<clipPath id="clip0_965_13005">
+<rect width="375" height="812" fill="white"/>
+</clipPath>
+</defs>
+</svg>