工作求职贴

neverGV

于 2020-10-26 00:59:17 发布

分类专栏：工作求职记录

本文链接：https://blog.csdn.net/neverGV/article/details/109282035

版权

工作求职记录专栏收录该内容

1 篇文章 0 订阅

订阅专栏

明天有一场web前端的实习面试，是关于vue，js，html的，在此先记录，此贴会一直更新到我找到实习的工作为止(地点：成都)
贴个图
在这里插入图片描述
大概类似于这个，不需要实现动画效果，用vue+css+js来做，不能用脚手架，我先去做做完再发出来

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="Vuecontainer">
      <div class="headertitle">
        <div
          class="titleitem"
          v-for="(item, index) in headertitle"
          :key="index"
        >
          {{item.name}}
        </div>
      </div>
      <div class="box"></div>
      <div class="goodsbody">
        <div
          class="d-flex goodsitem"
          v-for="(item, index) in list.item"
          :key="index"
        >
          <img :src="item.avatar" class="mr-1" style="width: 6rem" />
          <div>
            <p class="title">{{item.title}}</p>
            <div class="d-flex a-center">
              <p class="nprice">￥<span style="font-size: 25px">300</span></p>
              <p class="paynum"><span>300人付款</span></p>
            </div>
            <div style="padding-bottom: .5rem;">
              <span class="props" :class="{'guanggao':item.isadv}" v-if="item.isadv">广告</span>
              <span class="props" :class="{'includeexp':item.isincludeexp}" v-if="item.isincludeexp">包邮</span>
            </div>
            <p class="location">{{item.location}}</p>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script>
    var Vue = new Vue({
      el: "#Vuecontainer",
      data: {
        msg: "123",
        headertitle: [
          {
            name: "综合",
            icon: "",
          },
          {
            name: "综合",
            icon: "",
          },
          {
            name: "综合",
            icon: "",
          },
          {
            name: "综合",
            icon: "",
          },
        ],
        list: [],
      },
      created() {},
      mounted() {
        this.__init();
      },
      methods: {
        __init() {
          axios.get("./js/mock.json").then((res) => {
            if (res.data.msg == "ok") {
              this.list = res.data.data.list;
              console.log(res.data.data.list);
            }
          });
        },
      },
    });
  </script>
</html>
<style>
  * {
    margin: 0;
    padding: 0;
    font-size: 20px;
  }
  .headertitle {
    display: flex;
    position: fixed;
    background-color: #fff;
    height: 60px;
    width: 100%;
  }
  .titleitem {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .box {
    height: 60px;
  }
  .d-flex {
    display: flex;
  }
  .a-center {
    align-items: center;
  }
  .j-center {
    justify-content: center;
  }
  .goodsitem {
    margin: 1rem;
  }
  .mr-1 {
    margin-right: 1rem;
  }
  body,
  html {
    width: 100%;
    height: 100%;
  }
  .nprice {
    color: #ff7c02;
  }
  .paynum {
    color: #ccc;
    font-size: 15px;
    margin-left: 0.5rem;
    align-self: flex-end;
  }
  .location {
    font-size: 0.5rem;
  }
  .props {
    border: 1px solid;
    font-size: 0.5rem;
  }
  .guanggao {
    color: #ccc;
    border-color: #ccc;
    padding: 0 5px;
  }
  .includeexp{
    color: #ff7c02;
    border-color: #ff7c02;
    padding: 0 5px;
  }
</style>

模拟数据部分

{
    "msg":"ok",
    "data":{
        "list":{
                "item":[{
                    "title":"猫咪活物英短蓝猫幼猫折耳蓝白矮脚渐银",
                    "price":{
                        "oprice":100,
                        "nprice":200
                    },
                    "paynum":322,
                    "isadv":1,
                    "isincludeexp":1,
                    "location":"深圳",
                    "avatar":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603709274294&di=d353a6c09f5d0b48ab4eba1c1178b0dd&imgtype=0&src=http%3A%2F%2Fbos.pgzs.com%2Frbpiczy%2FWallpaper%2F2012%2F1%2F6%2Faeae710d55ed4afab8a5993d457634bc-2.jpg"
                },
                {
                    "title":"猫咪活物英短蓝猫幼猫折耳蓝白矮脚渐银",
                    "price":{
                        "oprice":100,
                        "nprice":200
                    },
                    "paynum":322,
                    "isadv":1,
                    "isincludeexp":1,
                    "location":"深圳",
                    "avatar":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603709274294&di=d353a6c09f5d0b48ab4eba1c1178b0dd&imgtype=0&src=http%3A%2F%2Fbos.pgzs.com%2Frbpiczy%2FWallpaper%2F2012%2F1%2F6%2Faeae710d55ed4afab8a5993d457634bc-2.jpg"
                },
                {
                    "title":"猫咪活物英短蓝猫幼猫折耳蓝白矮脚渐银",
                    "price":{
                        "oprice":100,
                        "nprice":200
                    },
                    "paynum":322,
                    "isadv":1,
                    "isincludeexp":0,
                    "location":"深圳",
                    "avatar":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603709274294&di=d353a6c09f5d0b48ab4eba1c1178b0dd&imgtype=0&src=http%3A%2F%2Fbos.pgzs.com%2Frbpiczy%2FWallpaper%2F2012%2F1%2F6%2Faeae710d55ed4afab8a5993d457634bc-2.jpg"
                },
                {
                    "title":"猫咪活物英短蓝猫幼猫折耳蓝白矮脚渐银",
                    "price":{
                        "oprice":100,
                        "nprice":200
                    },
                    "paynum":322,
                    "isadv":1,
                    "isincludeexp":0,
                    "location":"深圳",
                    "avatar":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603709274294&di=d353a6c09f5d0b48ab4eba1c1178b0dd&imgtype=0&src=http%3A%2F%2Fbos.pgzs.com%2Frbpiczy%2FWallpaper%2F2012%2F1%2F6%2Faeae710d55ed4afab8a5993d457634bc-2.jpg"
                },
                {
                    "title":"猫咪活物英短蓝猫幼猫折耳蓝白矮脚渐银",
                    "price":{
                        "oprice":100,
                        "nprice":200
                    },
                    "paynum":322,
                    "isadv":1,
                    "isincludeexp":0,
                    "location":"深圳",
                    "avatar":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603709274294&di=d353a6c09f5d0b48ab4eba1c1178b0dd&imgtype=0&src=http%3A%2F%2Fbos.pgzs.com%2Frbpiczy%2FWallpaper%2F2012%2F1%2F6%2Faeae710d55ed4afab8a5993d457634bc-2.jpg"
                },
                {
                    "title":"猫咪活物英短蓝猫幼猫折耳蓝白矮脚渐银",
                    "price":{
                        "oprice":100,
                        "nprice":200
                    },
                    "paynum":322,
                    "isadv":1,
                    "isincludeexp":0,
                    "location":"深圳",
                    "avatar":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603709274294&di=d353a6c09f5d0b48ab4eba1c1178b0dd&imgtype=0&src=http%3A%2F%2Fbos.pgzs.com%2Frbpiczy%2FWallpaper%2F2012%2F1%2F6%2Faeae710d55ed4afab8a5993d457634bc-2.jpg"
                },
                {
                    "title":"猫咪活物英短蓝猫幼猫折耳蓝白矮脚渐银",
                    "price":{
                        "oprice":100,
                        "nprice":200
                    },
                    "paynum":322,
                    "isadv":1,
                    "isincludeexp":0,
                    "location":"深圳",
                    "avatar":"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603709274294&di=d353a6c09f5d0b48ab4eba1c1178b0dd&imgtype=0&src=http%3A%2F%2Fbos.pgzs.com%2Frbpiczy%2FWallpaper%2F2012%2F1%2F6%2Faeae710d55ed4afab8a5993d457634bc-2.jpg"
                }
            ]
            }
    }
}