app积分页面展示修改

src/pages/integral/integral.vue

@@ -9,8 +9,9 @@
         <view class="content">
           <view class="content-title"
             >{{ $lang.lang.integral.headerTitle
-            }}{{ formattedLevelData(levelInfo.level) }}</view
+            }}{{ formattedLevelData(levelInfo.level) }}<image class="content-image" src="../../static/img/glodg.png"></image></view
           >
+
           <view class="content-text">
             <view class="text"
               >{{ $lang.lang.integral.spend }} {{ levelInfo.usedScore }}</view
@@ -21,6 +22,7 @@
             >
           </view>
           <view class="divider">
+            <image class="divider-image" src="../../static/img/goldBe.png"></image>
             <view class="divider-active" :style="{ width: `${score}%` }"></view>
             <view class="divider-unm">{{ levelInfo.totalScore }}</view>
             <view class="divider-level">{{ formattedLevelData(levelInfo.level) }}</view>

src/static/css/integral.css

@@ -54,7 +54,12 @@ page {
   margin-bottom: 16upx;
   text-shadow: 2upx 4upx 12upx rgba(0, 0, 0, 0.5);
 }
-
+.content-image{
+  width: 64upx;
+  height: 48upx;
+  top: 8upx;
+  left: 8px;
+}
 .content .content-text {
   display: flex;
 }
@@ -74,7 +79,13 @@ page {
   background-color: #fff;
   border-radius: 4upx;
 }
-
+.divider-image{
+  width: 20%;
+  height: 50upx;
+  position: relative;
+  left: -60upx;
+  top: -28upx;
+}
 .divider-active {
   position: absolute;
   top: 0;