宠物陪伴

src/pages/service/accompany.vue

@@ -6,6 +6,7 @@
   },
 }
 </route>
+
 <template>
   <view class="hot">
     <keep-alive>
@@ -22,7 +23,6 @@
               "
             ></view>
             <view style="background: #f6f7f9; width: 250vw; height: 60rpx"></view>
-            <!-- 轮播图 -->
             <view class="swiperImg" style="position: absolute; top: 180px; width: 100vw">
               <view style="padding: 0 30rpx">
                 <swiper
@@ -36,7 +36,6 @@
                   indicator-color="rgba(255, 255, 255, 0.5)"
                   style="height: 300rpx"
                 >
-                  <!--                  @click="clickSwiper(item.redirectUrl)"-->
                   <swiper-item v-for="(item, index) in swiperList" :key="index">
                     <image
                       :src="item.url"
@@ -47,45 +46,148 @@
               </view>
             </view>
           </view>
-          <!-- 宠物托运下半内容 -->
-          <view class="accompany_button">
-            <view class="acc_navigation">
-              <div>
-                <img src="" alt="" />
-                <span>先行赔付</span>
-              </div>
-              <div>
-                <img src="" alt="" />
-                <span>喂水喂食</span>
-              </div>
-              <div>
-                <img src="" alt="" />
-                <span>全程监管</span>
-              </div>
-              <div>
-                <img src="" alt="" />
-                <span>安全保障</span>
-              </div>
-            </view>
-          </view>
         </view>
       </view>
     </keep-alive>
-    <uni-popup ref="popupQr" type="dialog">
+  </view>
-      <uni-popup-dialog
+  <view class="p-5 bg-gray-100 h-screen" style="margin-top: 480rpx">
-        :before-close="true"
+    <!-- 表单区域 -->
-        :duration="2000"
+    <view class="mt-5 bg-white p-5 rounded-lg shadow" style="padding: 0">
-        content="是否拨打电话"
+      <!-- 导航栏 -->
-        @close="close"
+      <view class="mb-4 navigation">
-        @confirm="confirm"
+        <text class="text-gray-800 card_font">
-      ></uni-popup-dialog>
+          <image
-    </uni-popup>
+            :src="imgUrl('@/static/service/1726299427263.png')"
-    <home-tabbar :propIndex="2"></home-tabbar>
+            mode="scaleToFill"
-    <s-tabbar v-if="tabbar !== ''" :path="tabbar" />
+            class="card_accompany"
+          />
+          先行赔付
+        </text>
+        <text class="text-gray-800 card_font">
+          <image
+            :src="imgUrl('@/static/service/1726299704300.png')"
+            mode="scaleToFill"
+            class="card_accompany"
+          />
+          喂水喂食
+        </text>
+        <text class="text-gray-800 card_font">
+          <image
+            :src="imgUrl('@/static/service/1726299755235.png')"
+            mode="scaleToFill"
+            class="card_accompany"
+          />
+          全程监管
+        </text>
+        <text class="text-gray-800 card_font">
+          <image
+            :src="imgUrl('@/static/service/1726299776227.png')"
+            mode="scaleToFill"
+            class="card_accompany"
+          />
+          安全保障
+        </text>
+      </view>
+      <view class="position">
+        <div class="specific_position">点击此处定位具体位置</div>
+        <image
+          :src="imgUrl('@/static/service/1726370894136.png')"
+          mode="scaleToFill"
+          class="specific_img"
+        />
+        <div class="get_address">
+          <div
+            style="
+              background-color: #9093ff;
+              border-radius: 10px;
+              width: 15px;
+              height: 15px;
+              margin-left: 10px;
+            "
+          ></div>
+          <input placeholder="请输入上车地址" v-model="petName" class="address_input" />
+          <image
+            :src="imgUrl('@/static/service/1726383571208.png')"
+            mode="scaleToFill"
+            style="width: 20px; height: 20px"
+          />
+        </div>
+        <div class="get_address">
+          <div
+            style="
+              background-color: #ffd27d;
+              border-radius: 10px;
+              width: 15px;
+              height: 15px;
+              margin-left: 10px;
+            "
+          ></div>
+          <input placeholder="请输入宠物到达地址" v-model="petName" class="address_input" />
+          <image
+            :src="imgUrl('@/static/service/1726383534059.png')"
+            mode="scaleToFill"
+            style="width: 20px; height: 20px"
+          />
+        </div>
+        <div class="get_phone">
+          <image
+            :src="imgUrl('@/static/service/1726383956983.png')"
+            mode="scaleToFill"
+            style="width: 20px; height: 20px"
+          />
+          <input placeholder="请输入下单人电话" v-model="petName" class="address_input" />
+          <image
+            :src="imgUrl('@/static/service/1726383571208.png')"
+            mode="scaleToFill"
+            style="width: 20px; height: 20px"
+          />
+        </div>
+
+        <button class="get_quote">免费获取报价</button>
+      </view>
+    </view>
+    <view class="mt-5 bg-white p-5 rounded-lg shadow" style="padding: 0">
+      <div style="display: flex; align-items: center; flex-direction: column; padding: 20px">
+        <image
+          :src="imgUrl('@/static/service/1726389632384.png')"
+          mode="scaleToFill"
+          style="height: 80rpx; padding-bottom: 10px; width: 70%"
+        />
+        <image
+          :src="imgUrl('@/static/service/1726389664958.png')"
+          mode="scaleToFill"
+          style="height: 100rpx"
+        />
+      </div>
+    </view>
+    <view class="mt-5 bg-white p-5 rounded-lg shadow" style="padding: 0">
+      <div style="display: flex; align-items: center; flex-direction: column; padding: 20px">
+        <image
+          :src="imgUrl('@/static/service/1726403986495.png')"
+          mode="scaleToFill"
+          style="height: 80rpx; padding-bottom: 10px; width: 70%"
+        />
+        <image
+          :src="imgUrl('@/static/service/1726404642077.png')"
+          mode="scaleToFill"
+          style="height: 550rpx"
+        />
+      </div>
+    </view>
+    <view class="mt-5 bg-white p-5 rounded-lg shadow" style="padding: 0">
+      <div style="display: flex; align-items: center; flex-direction: column; padding: 20px">
+        <image
+          :src="imgUrl('@/static/service/1726405469570.png')"
+          mode="scaleToFill"
+          style="height: 80rpx; padding-bottom: 10px; width: 70%"
+        />
+      </div>
+    </view>
   </view>
 </template>
 
 <script lang="js" setup>
+import { ref, reactive } from 'vue'
 import { imgUrl, toPath } from '@/utils/commUtils'
 // 轮播图
 const swiperList = [
@@ -121,192 +223,74 @@ const props = defineProps({
 </script>
 
 <style lang="scss" scoped>
-.status_bar {
+.navigation {
-  height: var(--status-bar-height);
+  border-radius: 10px 10px 0 0;
-  width: 100%;
+  height: 80rpx;
-}
-
-page {
-  height: 100%;
-  background: #f6f7f9;
-}
-
-.hot {
-  position: relative;
-  width: 100vw;
-  height: 100vh;
-  background-color: #f7f7fa;
-
-  .backColor {
-    background: #761ee9;
-    height: 230rpx;
-  }
-
-  .container {
-    position: absolute;
-    top: 20rpx;
-    box-sizing: border-box;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .swiperImg {
-    margin-bottom: 30rpx;
-  }
-
-  .hotScreen {
-    position: relative;
-    box-sizing: border-box;
-    margin: 0 0 30rpx 0;
-    height: 320rpx;
-    width: 100%;
-    flex: 1;
-    padding: 0 30rpx;
-    background: #f6f7f9;
-
-    .backImg {
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-end;
-      width: 100%;
-      height: 250rpx;
-      box-sizing: border-box;
-      padding: 0;
-      background-repeat: no-repeat;
-      background-size: 100% 100%;
-      border-radius: 20rpx 20rpx 0 0;
-    }
-
-    .bottomInfo {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 20rpx;
-      background: linear-gradient(0deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%);
-
-      .screenName {
-        color: #fff;
-        font-size: 28rpx;
-        font-weight: 700;
-      }
-
-      .rightInfo {
-        display: flex;
-        align-items: center;
-        color: #fff;
-        font-size: 26rpx;
-
-        .area {
-          margin-right: 30rpx;
-        }
-
-        .location {
-          display: flex;
-          align-items: center;
-
-          image {
-            width: 40rpx;
-            height: 40rpx;
-          }
-        }
-      }
-    }
-
-    .screenBottomInfo {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      box-sizing: border-box;
-      padding: 0 30rpx;
-      height: 80rpx;
-      background: #fff;
-      font-size: 22rpx;
-      border-radius: 0 0 20rpx 20rpx;
-
-      .leftHotInfo {
-        display: flex;
-        align-items: center;
-
-        text {
-          color: rgba(0, 0, 0, 0.4);
-        }
-
-        image {
-          margin-right: 10rpx;
-          width: 30rpx;
-          height: 35rpx;
-        }
-
-        .rank {
-          position: relative;
-          display: flex;
-          align-items: center;
-          font-size: 26rpx;
-          margin-left: 30rpx;
-
-          .round {
-            position: absolute;
-            left: 70rpx;
-            top: -15rpx;
-            width: 30rpx;
-            height: 30rpx;
-            line-height: 30rpx;
-            text-align: center;
-            border-radius: 18rpx;
-            font-size: 18rpx;
-            color: #fff;
-          }
-
-          .rankAll {
-            padding: 5rpx 8rpx;
-            width: 70rpx;
-            height: 30rpx;
-            line-height: 30rpx;
-            text-align: center;
-            color: #ff7300;
-            background: #feebdb;
-            border-radius: 10rpx;
-          }
-
-          .rankCity {
-            padding: 5rpx 8rpx;
-            width: 70rpx;
-            height: 30rpx;
-            line-height: 30rpx;
-            text-align: center;
-            color: #3917dd;
-            border-radius: 10rpx;
-            background: #ebe7fc;
-          }
-        }
-      }
-
-      .screenPrice {
-        text:nth-child(1) {
-          font-weight: 700;
-          color: #ff145b;
-          font-size: 34rpx;
-          margin-right: 6rpx;
-        }
-      }
-    }
-  }
-}
-
-.accompany_button {
-  padding: 0 10px;
-  padding-right: 100px;
-  margin-top: 120rpx;
-  border-radius: 70px; /* 圆角效果 */
-  background-color: #ffffff;
-}
-
-.acc_navigation {
-  height: 150rpx;
   display: flex;
-  width: 80%;
   align-items: center;
   background-color: #ffefeb;
 }
+
+.card_accompany {
+  width: 40rpx;
+  height: 40rpx;
+  margin-left: 18rpx;
+}
+
+.card_font {
+  font-size: 13px;
+  color: #ff9a81;
+}
+
+.position {
+  flex-direction: column;
+  display: flex;
+  align-items: center;
+  color: #fa3534;
+}
+
+.specific_img {
+  margin: 7px 0;
+  height: 20px;
+  width: 30px;
+}
+
+.specific_position {
+  font-weight: bold;
+}
+
+.get_address {
+  display: flex;
+  align-items: center;
+  border: 1px solid #9093ff;
+  margin-bottom: 40rpx;
+  width: 90%;
+  height: 130rpx;
+  // padding: 15px 80px 15px 80px;
+  border-radius: 10px;
+}
+
+.reach_address {
+  border: 1px solid #9093ff;
+}
+
+.address_input {
+  margin-left: 15px;
+  width: 80%;
+}
+
+.get_phone {
+  display: flex;
+  align-items: center;
+  width: 90%;
+  height: 100rpx;
+  border-bottom: 1px solid #f4f6f8;
+}
+
+.get_quote {
+  margin: 25px 0 20px 0;
+  background-color: #9093ff;
+  color: #f4f6f8;
+  width: 90%;
+}
 </style>