更新 'pages/tel/tel.vue'

pages/tel/tel.vue

@@ -5,7 +5,7 @@
 3.数字键盘和拨打按钮区域 
 4.点击切换按钮即可收起数字键盘展示与拨号相匹配的列表。
 更新人：张甜甜   
-最后更新时间：2024.9.23
+最后更新时间：2024.10.15
 更新内容：样式-->
 <template>
   <view class="container">
@@ -40,13 +40,26 @@
       ></image>
     </view>
     <!-- 数字键盘和拨打按钮区域 -->
-    <view class="dial-pad" :style="{ zIndex: showDialPad ? '3' : '1' }">
-      <view v-show="showDialPad" class="row" v-for="(row, index) in dialPad" :key="index">
-        <button v-for="digit in row" :key="digit" @click="appendNumber(digit)" class="digit-button">
-          {{ digit }}
-        </button>
+     <!-- 数字键盘和拨打按钮区域 -->
+      <view class="dial-pad" :style="{ zIndex: showDialPad ? '3' : '1' }">
+        <view v-show="showDialPad" class="row" v-for="(row, index) in dialPad" :key="index">
+          <button
+            v-for="digit in row"
+            :key="digit"
+            @click="appendNumber(digit)"
+            :class="{
+              'digit-button': true,
+              'hash-button': digit === '#'
+            }"
+            :style="digit === '#' ? hashStyle : {}"
+          >
+            <!-- 判断是否为星号，如果是则加载图片 -->
+            <image v-if="digit === '*'" src="../../static/pics/star.png" class="star-icon" />
+            <!-- 否则显示数字或其他字符 -->
+            <span v-else>{{ digit }}</span>
+          </button>
+        </view>
       </view>
-    </view>
     <!-- 切换按钮和拨打按钮区域 -->
     <view class="bottom-buttons">
       <!-- 切换按钮 -->
@@ -502,10 +515,18 @@ export default {
   justify-content: center; 
   z-index: 3;
 }
+/* "*"和"#"单独处理 */
+.star-icon {
+  width: 50px;  /* 根据需要调整图片大小 */
+  height: 50px; /* 根据需要调整图片大小 */
+}
+.hash-button {
+  font-size: 43px; /* 调整 "#" 的字体大小，使其比其他数字小 */
+}
 
 .toggle-button {
   /* 切换按钮的样式，宽度占 30%，固定在底部，高度为 100px，靠右对齐 */
-  width: 33.3%;
+  width: 33.2%;
   height: 100px;
   display: flex;
   justify-content: center;
@@ -518,7 +539,6 @@ export default {
   background-color: #ecfff3;
 }
 
-
 .action {
   display: flex;
   position: fixed;
@@ -565,8 +585,8 @@ export default {
 
 .ScaleIcon {
   /* 切换图标的样式，指定图标的宽度和高度 */
-  width: 60px;
-  height: 60px;
+  width: 80px;
+  height: 80px;
 }
 
 
@@ -579,7 +599,7 @@ export default {
   overflow-y: auto; 
   z-index: 3;
   position: fixed; /* 固定定位 */
-  top: 0px; /* 距离顶部的距离，根据需要调整 */
+  top: -10px; /* 距离顶部的距离，根据需要调整 */
   left: 0; /* 确保在左侧对齐 */
 }
 
@@ -614,9 +634,6 @@ export default {
   display: inline-block; 
   width: 100%;
   text-align: center; /* 第二行居中对齐 */
-
-
-
 .contact-number {
   font-size: 26px;
   max-width: 80%;