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"
        @click="() => toH5Editor(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 } 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 || [];
});

const toH5Editor = item => {
  router.push({
    path: '/h5editor',
    query: {
      item: JSON.stringify(item),
    },
  });
};
</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 0.3s;
  border-radius: 2px;
  vertical-align: middle;
  margin-right: 1em;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--el-box-shadow-lighter);
}

.el-image {
  height: 280px;
}

.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>