add box | banner

src/packages/bi/src/components/mobile/task-content.vue

@@ -7,10 +7,22 @@
     <BiMobileTitle index="2" title="任务内容信息"></BiMobileTitle>
     <div class="bi-mobile-base-info_content">
       <div
-        class="bi-mobile-base-info_content_item"
+        :class="
+          item.type !== 'banner' ? 'bi-mobile-base-info_content_item' : 'bi-mobile-base-info_banner_container'
+        "
         v-for="(item, index) in info"
         :key="index"
       >
+        <template v-if="item.type === 'banner'">
+          <div
+            :style="{
+              backgroundImage: `linear-gradient(90deg,${item.color[0]},${item.color[1]})`
+            }"
+            class="bi-mobile-base-info_banner_item"
+          >
+            {{ item.text }}
+          </div>
+        </template>
         <template v-if="item.type === 'text'">
           <div class="bi-mobile-base-info_content_item_label">
             {{ item.label }}
@@ -56,6 +68,21 @@
             </div>
           </div>
         </template>
+        <template v-if="item.type === 'box'">
+          <div class="bi-mobile-base-info_content_item_label">
+            {{ item.label }}
+          </div>
+          <div class="bi-mobile-base-info_content_box">
+            <div v-for="(box, index) in item.value" :key="index">
+              <div class="bi-mobile-base-info_content_box_label">
+                {{ box.label }}
+              </div>
+              <div class="bi-mobile-base-info_content_box_value">
+                {{ box.value }}
+              </div>
+            </div>
+          </div>
+        </template>
       </div>
     </div>
   </div>
@@ -89,12 +116,44 @@ export default {
 }
 .bi-mobile-base-info {
   page-break-before: always;
+  &_banner_container {
+   font-size: 0.25rem;
+  }
+  &_banner_item {
+    // width: 2rem;
+    // height: 0.5rem;
+    padding: 0.1rem;
+    margin-top: 0.5rem;
+    width: fit-content;
+    color: #fff;
+  }
   &_content {
     width: 9.15rem;
     border: 0.03rem solid #e8e8e8;
     border-radius: 0.2rem;
     margin: 0.34rem auto 0.6rem auto;
     padding: 0 0.32rem;
+    &_box {
+      > div {
+        width: 33.33333333333333333%;
+        height: 2rem;
+        border: 1px solid #adadad;
+        color: #2d2d2d;
+        padding: 0.4rem;
+        text-align: center;
+        margin: 0 -1px -1px 0;
+      }
+      &_label {
+        font-size: 0.4rem;
+      }
+      &_value {
+        margin-top: 0.2rem;
+        font-size: 0.4rem;
+      }
+      margin-top: 0.3rem;
+      display: flex !important;
+      flex-wrap: wrap;
+    }
     &_item {
       font-size: 0.35rem;
       color: #9d9d9d;

src/packages/bi/src/personal-achievements/index.vue

@@ -38,6 +38,11 @@ export default {
       singleChoice: [],
       info: [
         {
+          type: 'banner',
+          color: ['#6DD2FF', '#027CFA'],
+          text: '推广产品'
+        },
+        {
           type: 'text',
           label: '会议时长',
           value: '2小时'
@@ -48,6 +53,11 @@ export default {
           value: '200'
         },
         {
+          type: 'banner',
+          color: ['#F39A0E', '#F6DB0B'],
+          text: '证明信息'
+        },
+        {
           type: 'text',
           label: '产品名称',
           value: '善存软胶囊'
@@ -62,7 +72,8 @@ export default {
           type: 'text',
           label: '参会人员反馈',
           value: '积极',
-          url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-01-03%2F5e0f0df137c15.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629539012&t=5a722a4b6f8831e899e7419e0821d841'
+          url:
+            'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-01-03%2F5e0f0df137c15.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629539012&t=5a722a4b6f8831e899e7419e0821d841'
         },
         {
           type: 'text',
@@ -77,6 +88,28 @@ export default {
             'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-01-03%2F5e0f0df137c15.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629539012&t=5a722a4b6f8831e899e7419e0821d841',
             'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2020-01-03%2F5e0f0df137c15.jpg&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1629539012&t=5a722a4b6f8831e899e7419e0821d841'
           ]
+        },
+        {
+          type: 'box',
+          label: '点击量(UV)',
+          value: [
+            {
+              label: '5月18日',
+              value: '12'
+            },
+            {
+              label: '5月22日',
+              value: '12'
+            },
+            {
+              label: '5月22日',
+              value: '12'
+            },
+            {
+              label: '5月22日',
+              value: '12'
+            }
+          ]
         }
       ]
     };