样式

康凯

2022-05-23 ef6159d225ce3c085031b7670e651c367dc6cb9b

 src/views/personage/detail.vue

@@ -6,7 +6,7 @@
        <div class="title-introduce">{{ titleIntroduce }}</div>
      </div>
      <div class="title-right">
        <div class="online-preview" @click="OnlinePreview(basisInfo.file)">在线浏览</div>
<!--        <div class="online-preview" @click="OnlinePreview(basisInfo.file)">在线浏览</div>-->
      </div>
    </div>
    <div class="content">
@@ -43,6 +43,9 @@
              </div>
              <div class="item-name">{{ item.name }}</div>
            </div>
                  <div v-if="images.data.length <= 0" style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;font-size: 16px;">
                     <span>暂无数据</span>
                  </div>
          </div>
        </mt-tab-container-item>
        <mt-tab-container-item id="3">
@@ -53,19 +56,22 @@
               v-infinite-scroll="NextVideos"
               :infinite-scroll-disabled="videos.scrollDisabled"
               :infinite-scroll-distance="10">
            <div class="content-item"
                 v-for="item in videos.data"
                 :key="item.id"
                 @click="ToVideoDetail(item.id)">
              <div class="item-left">
                <img :src="item.cover"/>
            <template v-for="item in videos.data">
              <div class="content-item" :key="item.key" @click="ToVideoDetail(item.id)">
                <div class="item-left">
                  <img :src="item.cover" v-if="item.cover"/>
                  <img src="@/assets/defaultCover.png" v-else/>
                </div>
                <div class="item-right">
                  <div class="item-name">{{ item.name }}</div>
                  <div class="item-introduce">{{ item.description }}</div>
                </div>
              </div>
              <div class="item-right">
                <div class="item-name">{{ item.name }}</div>
                <div class="item-introduce">{{ item.description }}</div>
              </div>
            </div>
            <div class="line"></div>
              <div class="line" :key="item.key"></div>
            </template>
                  <div v-if="videos.data.length <= 0" style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;font-size: 16px;">
                     <span>暂无数据</span>
                  </div>
          </div>
        </mt-tab-container-item>
      </mt-tab-container>
@@ -341,7 +347,7 @@
  align-items: center;

  width: 100%;
  height: 84vh;
  min-height: 84vh;
  background: #F8F8F8;
}

@@ -460,7 +466,7 @@

.content-images .content-item {
  display: flex;
  flex-wrap: wrap;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
@@ -504,11 +510,12 @@

.content-videos {
  display: flex;
  flex-wrap: wrap;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;

   width: 100%;
  height: 65vh;
  overflow: scroll;
  padding-top: 4vh;