1

src/components/index/Search.vue

 <template>
-  <view class="container"></view>
+  <view class="search">
+    <wd-icon name="thin-arrow-left" class="icon"></wd-icon>
+    <slot></slot>
+    <view class="searchBox">11</view>
+  </view>
 </template>
 
 <script setup>
@@ -18,12 +22,26 @@ function onHandleClick() {
 </script>
 
 <style lang="scss">
-.container {
-  .top {
-    width: 100%;
-    height: 440rpx;
-    background: linear-gradient(180deg, #fa5151 0%, rgba(243, 243, 243, 0) 100%);
-    border-radius: 0rpx 0rpx 0rpx 0rpx;
+.search {
+  width: 710rpx;
+  height: 80rpx;
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 16rpx 16rpx 16rpx 16rpx;
+  opacity: 0.8;
+  margin: 0 auto;
+  margin-top: 44rpx;
+  display: flex;
+  align-items: center;
+  .icon {
+    width: 22rpx;
+    height: 22rpx;
+  }
+  .searchBox {
+    opacity: 1;
+    width: 256rpx;
+    height: 56rpx;
+    background: #ffffff;
+    border-radius: 28rpx 28rpx 28rpx 28rpx;
   }
 }
 </style>

src/pages/index/index.vue

 <template>
-  <view class="container">
+  <view class="container" @tap="aa">
     <view class="top">
-      <view>
-        <Search></Search>
-      </view>
+      <Search>
+        <image class="food" src="../../static/food.png" mode="aspectFit|aspectFill|widthFix" />
+      </Search>
     </view>
   </view>
 </template>
 
 <script setup>
+import { onMounted } from 'vue';
 import { useCountStore } from '@/store';
 import Search from '../../components/index/Search.vue';
 
 const title = ref('小程序平台');
 const { countInfo, addCount } = useCountStore();
 
+onMounted(() => {
+  xma.xh.getUserProfile({
+    range: ['ACCOUNT', 'MOBILE', 'CITIZEN'],
+    async success(info) {
+      xma.showModal({
+        title: '提示',
+        content: info,
+        success: function (res) {
+          if (res.confirm) {
+            console.log('用户点击确定');
+          } else if (res.cancel) {
+            console.log('用户点击取消');
+          }
+        },
+      });
+    },
+  });
+});
 function toUIComponentsDoc() {
   window.open('https://wot-design-uni.netlify.app/component/button.html');
 }
@@ -31,6 +50,11 @@ function onHandleClick() {
     height: 440rpx;
     background: linear-gradient(180deg, #fa5151 0%, rgba(243, 243, 243, 0) 100%);
     border-radius: 0rpx 0rpx 0rpx 0rpx;
+    overflow: hidden;
+    .food {
+      width: 178rpx;
+      height: 52rpx;
+    }
   }
 }
 </style>