From a4e51ff48cb99b9fc35fdec32f6e083bca8dc746 Mon Sep 17 00:00:00 2001
From: gaoyuanwei <2826352639@qq.com>
Date: Thu, 4 Aug 2022 18:58:24 +0800
Subject: [PATCH] 817bug

---
 .../instructionManual/components/menuBook.vue | 731 +++++++++---------
 1 file changed, 378 insertions(+), 353 deletions(-)

diff --git a/front/src/views/instructionManual/components/menuBook.vue b/front/src/views/instructionManual/components/menuBook.vue
index 629a7721..e03dfdd5 100644
--- a/front/src/views/instructionManual/components/menuBook.vue
+++ b/front/src/views/instructionManual/components/menuBook.vue
@@ -1,46 +1,54 @@
 <template>
-    <div class="menu-box">
-        <div class="content-box">
-            <!-- 提供服务 -->
-            <div class="img-bg service-box">
-                <div class="title" style="margin-bottom: 20px">
-                    <div class="text text-white">提供服务</div>
-                    <div class="line line-white"></div>
-                </div>
-                <div class="list-box">
-                    <div class="list-item" v-for="(item, i) in seviceList" :key="i">
-                        <div class="item-name">
-                            <img :src="item.img" />
-                            {{ item.name }}
-                        </div>
-                        <div class="name-box">
-                            <div class="item-v" v-for="(v, j) in item.list" :key="j" :style="{
-                                'background-image': `url(${item.imgBG || ''})`,
-                                width: `${item.width || ''}`,
-                            }">
-                                {{ v }}
-                            </div>
-                        </div>
-                    </div>
-                </div>
+  <div class="menu-box">
+    <div class="content-box">
+      <!-- 提供服务 -->
+      <div class="img-bg service-box">
+        <div class="title" style="margin-bottom: 20px">
+          <div class="text text-white">提供服务</div>
+          <div class="line line-white"></div>
+        </div>
+        <div class="list-box">
+          <div class="list-item" v-for="(item, i) in seviceList" :key="i">
+            <div class="item-name">
+              <img :src="item.img" />
+              {{ item.name }}
             </div>
-            <!-- 总体流程 -->
-            <TheOverallProcess></TheOverallProcess>
-            <!-- imgList -->
-            <div class="img-box" v-for="(item, i) in imgList" :key="i">
-                <div class="title">
-                    <div class="text">{{ item.name }}</div>
-                    <div class="line"></div>
-                </div>
-                <div class="img-bg" :class="item.className" :style="{ 'background-image': `url(${item.bgImg || ''})` }">
-                </div>
-                <div v-if="item.btnText" class="btn" @click="toWhere(item.name)">
-                    {{ item.btnText }} >>
-                </div>
+            <div class="name-box">
+              <div
+                class="item-v"
+                v-for="(v, j) in item.list"
+                :key="j"
+                :style="{
+                  'background-image': `url(${item.imgBG || ''})`,
+                  width: `${item.width || ''}`,
+                }"
+              >
+                {{ v }}
+              </div>
             </div>
-            <!-- 联系我们 -->
-            <div class="img-bg callus-box">
-                <!-- <div class="title" style="margin-bottom: 20px">
+          </div>
+        </div>
+      </div>
+      <!-- 总体流程 -->
+      <TheOverallProcess></TheOverallProcess>
+      <!-- imgList -->
+      <div class="img-box" v-for="(item, i) in imgList" :key="i">
+        <div class="title">
+          <div class="text">{{ item.name }}</div>
+          <div class="line"></div>
+        </div>
+        <div
+          class="img-bg"
+          :class="item.className"
+          :style="{ 'background-image': `url(${item.bgImg || ''})` }"
+        ></div>
+        <div v-if="item.btnText" class="btn" @click="toWhere(item.name)">
+          {{ item.btnText }} >>
+        </div>
+      </div>
+      <!-- 联系我们 -->
+      <div class="img-bg callus-box">
+        <!-- <div class="title" style="margin-bottom: 20px">
           <div class="text text-white">联系我们</div>
           <div class="line line-white"></div>
         </div>
@@ -54,205 +62,222 @@
             <span>0530-0000000</span>
           </p>
         </div> -->
-            </div>
-            <!-- 能力上架弹窗 -->
-            <a-modal v-model:visible="visible" @ok="handleOk" class="shangjia-class" @cancel="handlecancel">
-                <div class="ant-modal-title" id="vcDialogTitle1">
-                    <div class="showBg"></div>
-                    能力上架申请
-                </div>
-                <div class="ability-to-type">
-                    <div class="title">能力类型选择</div>
-                    <div class="ability-to-type-content">
-                        <div v-for="item in abilityToType" :key="item" @click="abilityToTypeFunction(item)" :class="
-                            abilityToTypeFunctionData == item ? 'ability-to-type-down' : ''
-                        ">
-                            {{ item }}
-                        </div>
-                    </div>
-                </div>
-                <div class="component-type" v-if="abilityToTypeFunctionData == '组件服务'">
-                    <div class="title">组件类型选择</div>
-                    <div class="component-type-content">
-                        <a-radio-group v-model:value="componentTypeValue">
-                            <a-radio @click="componentTypeValueFunction(item)" v-for="item in componentType" :key="item"
-                                :value="item">
-                                {{ item }}
-                            </a-radio>
-                        </a-radio-group>
-                    </div>
-                </div>
-            </a-modal>
+      </div>
+      <!-- 能力上架弹窗 -->
+      <a-modal
+        v-model:visible="visible"
+        @ok="handleOk"
+        class="shangjia-class"
+        @cancel="handlecancel"
+      >
+        <div class="ant-modal-title" id="vcDialogTitle1">
+          <div class="showBg"></div>
+          能力上架申请
         </div>
+        <div class="ability-to-type">
+          <div class="title">能力类型选择</div>
+          <div class="ability-to-type-content">
+            <div
+              v-for="item in abilityToType"
+              :key="item"
+              @click="abilityToTypeFunction(item)"
+              :class="
+                abilityToTypeFunctionData == item ? 'ability-to-type-down' : ''
+              "
+            >
+              {{ item }}
+            </div>
+          </div>
+        </div>
+        <div
+          class="component-type"
+          v-if="abilityToTypeFunctionData == '组件服务'"
+        >
+          <div class="title">组件类型选择</div>
+          <div class="component-type-content">
+            <a-radio-group v-model:value="componentTypeValue">
+              <a-radio
+                @click="componentTypeValueFunction(item)"
+                v-for="item in componentType"
+                :key="item"
+                :value="item"
+              >
+                {{ item }}
+              </a-radio>
+            </a-radio-group>
+          </div>
+        </div>
+      </a-modal>
     </div>
+  </div>
 </template>
 <script setup>
-import HomeHeader from '@/views/home/components/header'
-import HomeFooter from '@/views/newHome/components/Footer'
-import { ref, onMounted, watch } from 'vue'
-import TheOverallProcess from './TheOverallProcess.vue'
-import { useRouter } from 'vue-router'
-import { message } from 'ant-design-vue'
-const router = useRouter()
-const seviceList = ref([
+  import HomeHeader from '@/views/home/components/header'
+  import HomeFooter from '@/views/newHome/components/Footer'
+  import { ref, onMounted, watch } from 'vue'
+  import TheOverallProcess from './TheOverallProcess.vue'
+  import { useRouter } from 'vue-router'
+  import { message } from 'ant-design-vue'
+  const router = useRouter()
+  const seviceList = ref([
     {
-        name: '组件服务',
-        img: require('@/assets/menu/service-component.png'),
-        list: ['智能算法', '图层服务', '开发组件', '业务组件'],
-        imgBG: require('../../../assets/menu/imgBG.png'),
-        width: '124px',
+      name: '组件服务',
+      img: require('@/assets/menu/service-component.png'),
+      list: ['智能算法', '图层服务', '开发组件', '业务组件'],
+      imgBG: require('../../../assets/menu/imgBG.png'),
+      width: '124px',
     },
     {
-        name: '应用资源',
-        img: require('@/assets/menu/service-application.png'),
-        list: [
-            '办公系统',
-            '业务系统',
-            '门户网站',
-            '大屏看板',
-            '小程序',
-            '公众号',
-        ],
-        imgBG: require('../../../assets/menu/imgBG.png'),
-        width: '124px',
+      name: '应用资源',
+      img: require('@/assets/menu/service-application.png'),
+      list: [
+        '办公系统',
+        '业务系统',
+        '门户网站',
+        '大屏看板',
+        '小程序',
+        '公众号',
+      ],
+      imgBG: require('../../../assets/menu/imgBG.png'),
+      width: '124px',
     },
     {
-        name: '基础设施',
-        img: require('@/assets/menu/service-infrastructure.png'),
-        list: ['视频资源', '云资源', '感知资源'],
-        imgBG: require('../../../assets/menu/imgBG.png'),
-        width: '124px',
+      name: '基础设施',
+      img: require('@/assets/menu/service-infrastructure.png'),
+      list: ['视频资源', '云资源', '感知资源'],
+      imgBG: require('../../../assets/menu/imgBG.png'),
+      width: '124px',
     },
     {
-        name: '数据资源',
-        img: require('@/assets/menu/service-data.png'),
-        list: ['政务信息资源'],
-        imgBG: require('../../../assets/menu/imgBG-long.png'),
-        width: '200px',
+      name: '数据资源',
+      img: require('@/assets/menu/service-data.png'),
+      list: ['政务信息资源'],
+      imgBG: require('../../../assets/menu/imgBG-long.png'),
+      width: '200px',
     },
-])
-const imgList = ref([
+  ])
+  const imgList = ref([
     {
-        name: '能力上架',
-        bgImg: require('../../../assets/menu/shelves.png'),
-        btnText: '立即上架',
-        className: 'shelves-img',
+      name: '能力上架',
+      bgImg: require('../../../assets/menu/shelves.png'),
+      btnText: '立即上架',
+      className: 'shelves-img',
     },
     {
-        name: '能力申请',
-        bgImg: require('../../../assets/menu/apply.png'),
-        btnText: '立即申请',
-        className: 'apply-img',
+      name: '能力申请',
+      bgImg: require('../../../assets/menu/apply.png'),
+      btnText: '立即申请',
+      className: 'apply-img',
     },
     {
-        name: '需求发布',
-        bgImg: require('../../../assets/menu/demand.png'),
-        btnText: '立即发布',
-        className: 'demand-img',
+      name: '需求发布',
+      bgImg: require('../../../assets/menu/demand.png'),
+      btnText: '立即发布',
+      className: 'demand-img',
     },
     {
-        name: '资源下架',
-        bgImg: require('../../../assets/menu/down.png'),
-        btnText: '立即下架',
-        className: 'down-img',
+      name: '资源下架',
+      bgImg: require('../../../assets/menu/down.png'),
+      btnText: '立即下架',
+      className: 'down-img',
     },
-])
-// 能力上架弹窗
-function handlecancel() {
+  ])
+  // 能力上架弹窗
+  function handlecancel() {
     abilityToTypeFunctionData.value = '组件服务'
     componentTypeValue.value = ''
-}
-let abilityToTypeFunctionData = ref('组件服务')
-function abilityToTypeFunction(item) {
+  }
+  let abilityToTypeFunctionData = ref('组件服务')
+  function abilityToTypeFunction(item) {
     abilityToTypeFunctionData.value = item
-}
-let abilityToType = ref(['组件服务', '应用资源'])
-let componentType = ref([
+  }
+  let abilityToType = ref(['组件服务', '应用资源'])
+  let componentType = ref([
     '智能算法',
     '图层服务',
     '开发组件',
     // '办公组件',
     '业务组件',
     // '其他',
-])
-const visible = ref(false)
-let componentTypeValueOld = ref('')
-function componentTypeValueFunction(item) {
+  ])
+  const visible = ref(false)
+  let componentTypeValueOld = ref('')
+  function componentTypeValueFunction(item) {
     if (componentTypeValueOld.value != item) {
-        componentTypeValue.value = item
-        componentTypeValueOld.value = item
+      componentTypeValue.value = item
+      componentTypeValueOld.value = item
     } else {
-        componentTypeValue.value = ''
+      componentTypeValue.value = ''
     }
-}
-let componentTypeValue = ref('')
-const handleOk = (e) => {
+  }
+  let componentTypeValue = ref('')
+  const handleOk = (e) => {
     let snum = ref({})
     if (abilityToTypeFunctionData.value == '组件服务') {
-        if (!componentTypeValue.value || componentTypeValue.value == '') {
-            message.error('请选择组件类型！')
-            return
-        } else if (
-            componentTypeValue.value === '智能算法' ||
-            componentTypeValue.value === '开发组件' ||
-            componentTypeValue.value === '业务组件' ||
-            componentTypeValue.value === '图层服务'
-        ) {
-            snum.value = {
-                abilityToType: abilityToTypeFunctionData.value,
-                componentTypeValue: componentTypeValue.value,
-            }
-        } else {
-            message.error('功能开发中！')
-            return
-        }
-    } else {
+      if (!componentTypeValue.value || componentTypeValue.value == '') {
+        message.error('请选择组件类型！')
+        return
+      } else if (
+        componentTypeValue.value === '智能算法' ||
+        componentTypeValue.value === '开发组件' ||
+        componentTypeValue.value === '业务组件' ||
+        componentTypeValue.value === '图层服务'
+      ) {
         snum.value = {
-            abilityToType: abilityToTypeFunctionData.value,
+          abilityToType: abilityToTypeFunctionData.value,
+          componentTypeValue: componentTypeValue.value,
         }
+      } else {
+        message.error('功能开发中！')
+        return
+      }
+    } else {
+      snum.value = {
+        abilityToType: abilityToTypeFunctionData.value,
+      }
     }
     const applypage = router.resolve({
-        path: '/nenglishangjia', // 跳转的页面路由
-        query: snum.value,
+      path: '/nenglishangjia', // 跳转的页面路由
+      query: snum.value,
     })
     window.open(applypage.href, '_blank')
     visible.value = false
     abilityToTypeFunctionData.value = '组件服务'
     componentTypeValue.value = ''
     console.log(e)
-}
-// 跳转
-const toWhere = (data) => {
+  }
+  // 跳转
+  const toWhere = (data) => {
     console.log(data, 'wwwwwww')
     if (data === '能力上架') {
-        visible.value = true
+      visible.value = true
     } else if (data === '能力申请') {
-        const newpage = router.resolve({
-            path: '/addApplication', // 跳转的页面路由
-        })
-        window.open(newpage.href, '_blank')
+      const newpage = router.resolve({
+        path: '/DetailsPageconetent',
+        query: {
+          select: '组件服务',
+        },
+      })
+      window.location.href = newpage.href
     } else if (data === '需求发布') {
-        const newpage = router.resolve({
-            path: '/DetailsPageconetent',
-            query: {
-                select: '组件服务',
-            },
-        })
-        window.location.href = newpage.href
+      const newpage = router.resolve({
+        path: '/addApplication', // 跳转的页面路由
+      })
+      window.open(newpage.href, '_blank')
     } else if (data === '资源下架') {
-        window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
-        const newpage = router.resolve({
-            path: '/personalCenter',
-        })
-        window.location.href = newpage.href
+      window.sessionStorage.setItem('type', JSON.stringify('PurchaseVehicle'))
+      const newpage = router.resolve({
+        path: '/personalCenter',
+      })
+      window.location.href = newpage.href
     }
-}
-watch(abilityToTypeFunctionData, () => {
+  }
+  watch(abilityToTypeFunctionData, () => {
     componentTypeValue.value = ''
-})
+  })
 </script>
 <style lang="less">
-.shangjia-class {
+  .shangjia-class {
     position: fixed;
     left: 50%;
     top: 50%;
@@ -262,138 +287,138 @@ watch(abilityToTypeFunctionData, () => {
     font-weight: 500;
 
     .ant-radio-inner {
-        height: 0.16rem;
-        width: 0.16rem;
+      height: 0.16rem;
+      width: 0.16rem;
     }
 
     .ant-radio-inner::after {
-        background-color: unset;
-        background: url('~@/assets/personalCenter/xuanzhong.png') no-repeat;
-        background-size: cover;
-        background-position: center;
+      background-color: unset;
+      background: url('~@/assets/personalCenter/xuanzhong.png') no-repeat;
+      background-size: cover;
+      background-position: center;
     }
 
     .ant-modal-content {
-        border-radius: 0.1rem;
+      border-radius: 0.1rem;
 
-        .ability-to-type,
-        .component-type {
+      .ability-to-type,
+      .component-type {
+        display: flex;
+        margin-top: 0.2rem;
+
+        .title {
+          white-space: nowrap;
+          margin-right: 0.2rem;
+          display: flex;
+          align-items: center;
+          height: 0.26rem;
+        }
+
+        .component-type-content {
+          width: 100%;
+          height: unset;
+          border: unset;
+          background: unset;
+
+          .ant-radio-group {
+            display: grid;
+            grid-template-columns: 1fr 1fr 1fr;
+            grid-gap: 0.15rem;
+          }
+        }
+      }
+
+      .ability-to-type {
+        .ability-to-type-content {
+          display: grid;
+          grid-template-columns: 1fr 1fr 1fr;
+          height: unset;
+          border: unset;
+          background: unset;
+
+          div {
+            margin-right: 0.15rem;
+            cursor: pointer;
+            font-size: 0.14rem;
+            width: 0.9rem;
+            height: 0.26rem;
+            border-radius: 0.13rem;
+            color: #333333;
+            background: #f5f5f5;
+            border: 0.01rem #cccccc solid;
             display: flex;
-            margin-top: 0.2rem;
+            justify-content: center;
+            align-items: center;
+            font-weight: 500;
+          }
 
-            .title {
-                white-space: nowrap;
-                margin-right: 0.2rem;
-                display: flex;
-                align-items: center;
-                height: 0.26rem;
-            }
-
-            .component-type-content {
-                width: 100%;
-                height: unset;
-                border: unset;
-                background: unset;
-
-                .ant-radio-group {
-                    display: grid;
-                    grid-template-columns: 1fr 1fr 1fr;
-                    grid-gap: 0.15rem;
-                }
-            }
-        }
-
-        .ability-to-type {
-            .ability-to-type-content {
-                display: grid;
-                grid-template-columns: 1fr 1fr 1fr;
-                height: unset;
-                border: unset;
-                background: unset;
-
-                div {
-                    margin-right: 0.15rem;
-                    cursor: pointer;
-                    font-size: 0.14rem;
-                    width: 0.9rem;
-                    height: 0.26rem;
-                    border-radius: 0.13rem;
-                    color: #333333;
-                    background: #f5f5f5;
-                    border: 0.01rem #cccccc solid;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    font-weight: 500;
-                }
-
-                .ability-to-type-down {
-                    background: #0087ff;
-                    color: #fff;
-                }
-            }
+          .ability-to-type-down {
+            background: #0087ff;
+            color: #fff;
+          }
         }
+      }
     }
 
     .ant-modal-title {
-        display: flex;
-        align-items: center;
+      display: flex;
+      align-items: center;
     }
 
     .ant-modal-footer {
-        border: 0;
-        text-align: center;
-        padding-bottom: 0.2rem;
+      border: 0;
+      text-align: center;
+      padding-bottom: 0.2rem;
 
-        button {
-            margin-right: 0.2rem;
-            border-radius: 0.08rem;
-        }
+      button {
+        margin-right: 0.2rem;
+        border-radius: 0.08rem;
+      }
     }
 
     .showBg {
-        height: 0.24rem;
-        width: 0.24rem;
-        background: url('~@/assets/home/shenqing.png') no-repeat;
-        background-size: cover;
-        background-position: center;
-        margin-right: 0.1rem;
+      height: 0.24rem;
+      width: 0.24rem;
+      background: url('~@/assets/home/shenqing.png') no-repeat;
+      background-size: cover;
+      background-position: center;
+      margin-right: 0.1rem;
     }
-}
+  }
 </style>
 <style lang="less" scoped>
-.menu-box {
+  .menu-box {
     width: 1920px;
     // padding-bottom: 40px;
-}
+  }
 
-.title {
+  .title {
     margin-bottom: 20px;
 
     .text {
-        padding: 20px 0;
-        font-size: 26px;
-        margin: 0 auto;
-        text-align: center;
+      padding: 20px 0;
+      font-size: 26px;
+      margin: 0 auto;
+      text-align: center;
     }
 
     .line {
-        width: 50px;
-        height: 3px;
-        background: #0058e1;
-        margin: 0 auto;
+      width: 50px;
+      height: 3px;
+      background: #0058e1;
+      margin: 0 auto;
     }
 
     .line-white {
-        background: #fff;
+      background: #fff;
     }
 
     .text-white {
-        color: #fff;
+      color: #fff;
     }
-}
+  }
 
-.btn {
+  .btn {
     width: 150px;
     height: 50px;
     line-height: 50px;
@@ -406,135 +431,135 @@ watch(abilityToTypeFunctionData, () => {
     cursor: pointer;
 
     &:hover {
-        background: #e5eefc;
+      background: #e5eefc;
     }
-}
+  }
 
-.img-box {
+  .img-box {
     margin-bottom: 50px;
-}
+  }
 
-.service-box {
+  .service-box {
     width: 1920px;
     height: 613px;
     background-size: 100% 100%;
     background-image: url('../../../assets/menu/service.png');
 
     .list-box {
-        width: 1560px;
-        height: 350px;
-        margin: 0 auto;
+      width: 1560px;
+      height: 350px;
+      margin: 0 auto;
     }
-}
+  }
 
-.callus-box {
+  .callus-box {
     width: 1920px;
     height: 214px;
     background-size: 100% 100%;
     background-image: url('../../../assets/menu/callus.png');
 
     .list-box {
-        width: 1560px;
-        // height: 350px;
-        margin: 0 auto;
+      width: 1560px;
+      // height: 350px;
+      margin: 0 auto;
 
-        p {
-            font-size: 24px;
-            color: #ffffff;
-            font-weight: bold;
+      p {
+        font-size: 24px;
+        color: #ffffff;
+        font-weight: bold;
 
-            span {
-                font-size: 30px;
-            }
+        span {
+          font-size: 30px;
         }
+      }
 
-        p:nth-child(1) {
-            margin-right: 100px;
-        }
+      p:nth-child(1) {
+        margin-right: 100px;
+      }
     }
-}
+  }
 
-.img-bg {
+  .img-bg {
     width: 1920px;
     background-size: 100% 100%;
-}
+  }
 
-.process-img {
+  .process-img {
     height: 855px;
     background-image: url('../../../assets/menu/process.png');
-}
+  }
 
-.shelves-img {
+  .shelves-img {
     height: 497px;
     width: 1107px;
     margin: 0 auto;
     background-image: url('../../../assets/menu/shelves.png');
-}
+  }
 
-.apply-img {
+  .apply-img {
     height: 752px;
     background-image: url('../../../assets/menu/apply.png');
-}
+  }
 
-.demand-img {
+  .demand-img {
     height: 525px;
     width: 1300px;
     margin: 0 auto;
     background-image: url('../../../assets/menu/demand.png');
-}
+  }
 
-.down-img {
+  .down-img {
     height: 544px;
     background-image: url('../../../assets/menu/down.png');
-}
+  }
 
-.list-box {
+  .list-box {
     display: flex;
     align-items: center;
     justify-content: center;
 
     .list-item {
-        padding: 10px 20px;
-        width: 310px;
-        height: 356px;
-        background: rgba(23, 85, 177, 0.43);
-        border: 1px solid #74a9f8;
-        border-radius: 10px;
-        margin: 0 10px;
-        cursor: pointer;
+      padding: 10px 20px;
+      width: 310px;
+      height: 356px;
+      background: rgba(23, 85, 177, 0.43);
+      border: 1px solid #74a9f8;
+      border-radius: 10px;
+      margin: 0 10px;
+      cursor: pointer;
 
-        .item-name {
-            color: #fff;
-            font-size: 20px;
-            text-align: center;
-            padding: 20px 0 10px 0;
-        }
+      .item-name {
+        color: #fff;
+        font-size: 20px;
+        text-align: center;
+        padding: 20px 0 10px 0;
+      }
 
-        .name-box {
-            display: flex;
-            align-items: center;
-            justify-content: flex-start;
-            flex-wrap: wrap;
-        }
+      .name-box {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+      }
 
-        .item-v {
-            width: 124px;
-            height: 74px;
-            line-height: 74px;
-            color: #fff;
-            font-size: 20px;
-            text-align: center;
-            margin: 0 0 20px;
-            background-size: 100% 100%;
-        }
+      .item-v {
+        width: 124px;
+        height: 74px;
+        line-height: 74px;
+        color: #fff;
+        font-size: 20px;
+        text-align: center;
+        margin: 0 0 20px;
+        background-size: 100% 100%;
+      }
 
-        .item-v:nth-child(2n) {
-            margin-left: 16px;
-        }
+      .item-v:nth-child(2n) {
+        margin-left: 16px;
+      }
 
-        // .item-v:last-child {
-        //   width: 200px;
-        // }
+      // .item-v:last-child {
+      //   width: 200px;
+      // }
     }
-}
-</style>
\ No newline at end of file
+  }
+</style>