mediaAll/src/view/allMedia/H5Mall.vue

<template>
  <el-scrollbar class="H5Mall">
    <div class="search line">
      <el-icon :size="25" class="searchIcon"><Search /></el-icon>
      <input
        class="searchinput"
        type="text"
        placeholder="请输入搜索内容"
        v-model="searchText"
      />
    </div>
    <div class="main">
      <div class="item" v-for="item,index in list" :key="index">
        <component :is="components[item.type]" :item="item"></component>
        <div class="main_item" v-text="item.title"></div>
        <div class="body">
            <img style="width: 20px;float: left;" :src="defaultIcon" />
            <span>
                <img style="width: 20px;" :src="eyeIcon" />
                <span style="vertical-align: middle;" v-text="item.hot"></span>
            </span>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>

<script setup>
import { ref } from 'vue';
// import { useRouter, useRoute } from 'vue-router';
import defaultIcon from "../../assets/img/default_user.png";
import eyeIcon from "../../assets/img/eye.png"
import H5 from "./components/H5.vue";
import LONGPAGE from "./components/LONGPAGE.vue";
import POSTER from "./components/POSTER.vue";
import { getH5Mall } from '../../api/index.js';

const components = {
    H5,
    LONGPAGE,
    POSTER
}
// const router = useRouter();
// const route = useRoute();

const searchText = ref('');
const list = ref([]);

getH5Mall({}).then(r => {
  list.value = r.list || [];
});
</script>

<style scoped>
.H5Mall {
  padding: 1em;
  height: 100%;
}
.searchinput {
  outline: none;
  border: none;
  height: 40px;
  line-height: 40px;
  font-size: 16px;
  display: block;
  width: 100%;
}
.search {
  width: 60%;
  margin: 0 auto;
  font-size: 0;
  height: 40px;
  line-height: 40px;
  border-radius: 20px;
  padding: 0 50px 0 20px;
  position: relative;
  overflow: hidden;
  border: 1px solid var(--el-border-color);
}

.searchIcon {
  position: absolute;
  right: 15px;
  top: 5px;
  color: var(--el-border-color);
}

.main{
    font-weight: 500;
    margin-top: 1em;
    padding: 1em 0 1em 1em;
}

.main .item {
    display: inline-block;
    width: 184px;
    height: 363px;
    transition: all .3s;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 1em;
    border-radius: 5px;
    overflow: hidden;
}

.main_item{
    color: #666;
    padding: 0 5px;
    margin: 5px 0;
    font-size: 14px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.main .item:hover{
    box-shadow: var(--el-box-shadow);
    margin-top: -15px;
}

.main .body{
    padding: 0 5px;
    text-align: right;
}
.main img{
    vertical-align: middle;
}
</style>