refactor: 试图详解组件样式修改

src/components/answer-explanation/index.vue

 <template>
   <view class="card">
-    <u-card :title="title" padding="10" margin="0" :thumb="thumb">
-      <view class="u-flex content" slot="body">
-        <view class="lists">正确答案：{{ answer }}</view>
-        <view class="lists">解释说明：{{ explain }}</view>
+    <view slot="head" class="u-flex head">
+      <view class="blue"></view>
+      <view class="title">
+        {{ title }}
       </view>
-    </u-card>
+    </view>
+    <view class="u-flex content" slot="body">
+      <view class="lists">正确答案：{{ answer }}</view>
+      <view class="lists">解释说明：{{ explain }}</view>
+    </view>
   </view>
 </template>
 
@@ -33,13 +37,30 @@ export default {
   },
   data() {
     return {
-      thumb: 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
     }
   }
 }
 </script>
 <style lang="scss" scoped>
 .card {
+  padding: 20rpx 10rpx 20rpx 5rpx;
+  border: 2px solid #E8EBF3;
+  border-radius: 10rpx;
+  .head {
+    font-size: 32rpx;
+    font-weight: bold;
+    padding: 10rpx 0rpx;
+    .blue {
+      width: 4rpx;
+      height: 34rpx;
+      background: #2953FF;
+      position: relative;
+      left: -8rpx;
+    }
+    .title {
+      padding-left: 25rpx;
+    }
+  }
   .content {
     flex-flow: column;
     width: 100%;
@@ -47,9 +68,12 @@ export default {
     .lists {
       width: 100%;
       text-align: left;
-      padding: 10rpx 0 0rpx 40rpx;
+      padding: 10rpx 0 0rpx 30rpx;
       line-height: 50rpx;
     }
+    .lists:nth-of-type(1) {
+      color: #2953FF;
+    }
   }
 }
 </style>