首页底部

pages/index/components/CompanyIntro.vue

@@ -47,30 +47,39 @@
       </view>
     </view>
 
-    <!-- 底部CTA区域 - 橙色背景+图片叠加+二维码+文字 -->
+    <!-- 底部CTA区域 - 图片底+橙色叠加层+内容层 -->
     <view class="cta-footer">
-      <!-- 橙色背景层 -->
+      <!-- 图片底层 - image_26原图 -->
+      <image class="cta-overlay-img" src="/static/images/home/image_26_1496_1761.png" mode="widthFix"></image>
+      <!-- 橙色叠加层 - 在图片上方, 高不透明度让橙色更亮更突出 -->
       <view class="cta-orange-bg"></view>
-      <!-- 图片叠加层 -->
-      <image
-        class="cta-overlay-img"
-        src="/static/images/home/image_26_1496_1761.png"
-        mode="widthFix"
-      ></image>
-      <!-- 二维码 -->
-      <view class="qr-wrap">
+      <!-- 内容层 -->
+      <view class="cta-content">
+        <!-- 长按识别 196×20px → 377×38rpx, 14px Medium white -->
+        <text class="cta-tip">长按识别二维码，添加经理微信</text>
+        <!-- 装饰箭头图标 19×10px → 37×19rpx -->
+        <image class="cta-arrow" src="/static/icons/home/icon_arrow_down.png" mode="aspectFit"></image>
+        <!-- 二维码 104×104px → 200×200rpx, 圆角10px → 19rpx -->
+        <view class="qr-wrap">
+          <image
+            class="qr-img"
+            src="/static/images/home/Rectangle_187_1470_1653.png"
+            mode="aspectFit"
+          ></image>
+        </view>
+        <!-- 电话栏 200×45px → 385×87rpx, #000 0.1透明, 圆角10px → 19rpx -->
+        <view class="phone-pill">
+          <image class="phone-icon" src="/static/icons/home/icon_phone.svg" mode="aspectFit"></image>
+          <text class="phone-text">15999928161</text>
+          <image class="phone-icon" src="/static/icons/home/icon_wechat.svg" mode="aspectFit"></image>
+        </view>
+        <!-- 联系我们 - 用户提供的image.png -->
         <image
-          class="qr-img"
-          src="/static/images/home/Rectangle_187_1470_1653.png"
-          mode="aspectFit"
+          class="cta-text-img"
+          src="/static/images/home/contact_us.png"
+          mode="widthFix"
         ></image>
       </view>
-      <!-- 联系我们文字图 -->
-      <image
-        class="cta-text-img"
-        src="/static/images/home/image_28_1498_1767.png"
-        mode="widthFix"
-      ></image>
     </view>
   </view>
 </template>
@@ -238,61 +247,102 @@ export default {
   line-height: 1.45;
 }
 
-/* 底部CTA - 橙色背景+图片叠加+二维码+文字 */
+/* 底部CTA - 橙色背景层+图片叠加层+内容层 */
 .cta-footer {
   position: relative;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0;
-  box-sizing: border-box;
+  width: 750rpx;
+  overflow: hidden;
 }
-/* 橙色背景层 - 391x200 */
+/* 图片底层 - image_26原图 */
+.cta-overlay-img {
+  position: relative;
+  width: 100%;
+  z-index: 0;
+  display: block;
+}
+/* 橙色叠加层 - 在图片上方, 0.8高不透明度让亮橙色突出 */
 .cta-orange-bg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
-  height: 400rpx;
+  height: 100%;
   background: #ff6800;
-  z-index: 0;
-}
-/* 图片叠加层 - 390x219 */
-.cta-overlay-img {
-  position: relative;
-  width: 100%;
+  opacity: 0.85;
   z-index: 1;
-  display: block;
 }
-/* 二维码 - 104x104 居中 圆角10px 白底 */
-.qr-wrap {
+/* 内容层 - absolute覆盖图片和橙色层, flex column 居中 */
+.cta-content {
   position: absolute;
-  top: 54rpx;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 208rpx;
-  height: 208rpx;
-  background: #ffffff;
-  border-radius: 20rpx;
-  padding: 20rpx;
-  box-sizing: border-box;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
   z-index: 2;
   display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 33rpx;   /* 17px → 33rpx */
+  box-sizing: border-box;
+}
+/* 长按识别 14px Medium white → 27rpx */
+.cta-tip {
+  font-size: 27rpx;
+  font-weight: 500;
+  color: #ffffff;
+  line-height: 38rpx;
+}
+/* 装饰箭头图标 19×10px → 37×19rpx */
+.cta-arrow {
+  width: 37rpx;
+  height: 19rpx;
+  margin-top: 8rpx;      /* 4px → 8rpx */
+}
+/* 二维码 104×104px → 200×200rpx, 圆角10px → 19rpx */
+.qr-wrap {
+  margin-top: 13rpx;     /* 7px → 13rpx */
+  width: 200rpx;
+  height: 200rpx;
+  background: #ffffff;
+  border-radius: 19rpx;
+  padding: 0;
+  box-sizing: border-box;
+  display: flex;
   align-items: center;
   justify-content: center;
+  overflow: hidden;
 }
 .qr-img {
   width: 100%;
   height: 100%;
 }
-/* 联系我们文字图 - 236x78 居中 */
+/* 电话栏 200×45px → 385×87rpx, #000 0.1透明, 圆角10px → 19rpx */
+.phone-pill {
+  margin-top: 23rpx;     /* 12px → 23rpx */
+  width: 385rpx;
+  height: 87rpx;
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 19rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 12rpx;
+  box-sizing: border-box;
+}
+.phone-icon {
+  width: 35rpx;          /* 18px → 35rpx */
+  height: 35rpx;
+  flex-shrink: 0;
+}
+.phone-text {
+  font-size: 23rpx;      /* 12px → 23rpx */
+  font-weight: 700;
+  color: #ffffff;
+  line-height: 32rpx;
+}
+/* 联系我们 - 用户提供的image.png */
 .cta-text-img {
-  position: absolute;
-  top: 256rpx;
-  left: 50%;
-  transform: translateX(-50%);
-  width: 472rpx;
-  z-index: 3;
+  margin-top: 19rpx;     /* 10px → 19rpx */
+  width: 569rpx;
 }
 </style>