发表于: 2019-11-05 22:43:10

1 1074


今天完成的事情:

1.今天进行了项目页面的重构和组件的模块化,使用import来引用重复的组件:

<template>
<!-- 视频缩略图 -->
  <div class="thumbnail">
    <div v-for="source in resource" :key="source.idclass="source">
      <router-link to="/headVideo">
        <div class="sourceStyle">
          <img :src="source.imgalt />
          <div class="sourceName">
            <p>{{source.name}}</p>
          </div>
          <div class="sourcePrice">
            <p>{{source.price}}</p>
            <p class="oldPrice">{{source.oldPrice}}</p>
          </div>
        </div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name: "thumbnail",
  data() {
    return {
        resource: [
    {
      id: 1,
      img:
        "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
      name: "《气体摩尔体积》",
      price: "¥10",
      oldPrice: "¥30"
    },
    {
      id: 2,
      img:
        "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
      name: "《商品的含义和气体基本属性(第一课)》",
      price: "¥15",
      oldPrice: "¥40"
    },
    {
      id: 3,
      img:
        "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
      name: "《商品的含义和气体基本属性(第二课)》",
      price: "免费"
    },
    {
      id: 4,
      img:
        "https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg",
      name: "《商品的含义和气体基本属性(第二课)》",
      price: "免费"
    }
  ]

    }
  },
};
</script>

<style lang="scss" scope>
.thumbnail {
  width100%;
  displayflex;
  flex-flowrow wrap;
  padding-top15px;
  .source {
    width50%;
    .sourceStyle {
      displayflex;
      flex-flowcolumn nowrap;
      align-itemscenter;
      padding-bottom5px;
      img {
        width153px;
        height84px;
      }
      p {
        margin0;
      }
      .sourceName {
        min-height31px;
        font-size10px;
        displayflex;
        justify-contentcenter;
        align-itemscenter;
      }
      .sourcePrice {
        font-size12px;
        displayflex;
        .oldPrice {
          text-decorationline-through;
          color#7f7f7f;
        }
      }
    }
  }
  a {
    -webkit-tap-highlight-colortransparent;
    text-decorationnone;
    color#000;
  }
}
</style>

引用:

<template>
<!-- 搜索视频 -->
  <div class="courseVideo">
    <div class="sort">
      <p :class="{'sortClick':sortClick==1}" @click="sortClick=1">全部</p>
      <p :class="{'sortClick':sortClick==2}" @click="sortClick=2">最热</p>
      <p :class="{'sortClick':sortClick==3}" @click="sortClick=3">销量</p>
      <p :class="{'sortClick':sortClick==4}" @click="sortClick=4">免费</p>
    </div>
    <p class="sourceNum">共12条相关内容</p>
    <thumbnail></thumbnail>
  </div>
</template>

<script>
  import thumbnail from '../components/Thumbnail.vue';

export default {
  name: "courseVideo",
          components: {
    thumbnail
  },
  data() {
    return {
      sortClick: 1,
    };
  }
};
</script>

<style lang="scss" scope>
.courseVideo {
  .sort {
    displayflex;
    justify-contentspace-around;
    border-top1px solid #d7d7d7;
    border-bottom1px solid #d7d7d7;
    p {
      font-size12px;
      margin10px 5px;
      border-radius5px;
      padding0 3px;
    }
    .sortClick {
      background-color#000;
      color#fff;
    }
  }
  .sourceNum {
    font-size8px;
    color#555;
  }
}
</style>

引用2:

<template>
  <div class="recommend">
    <thumbnail></thumbnail>
  </div>
</template>

<script>
  import thumbnail from '../../components/Thumbnail.vue';
export default {
  name: "recommend",
        components: {
    thumbnail
  },
  data() {
    return {
    };
  }
};
</script>

<style lang="scss" scope>
</style>


明天计划:

1.把组件模块化弄完

2.然后进行vuex的学习

3.还需要学习axios的封装,为了在组件中更好的复用axios


返回列表 返回列表
评论

    分享到