小米首页vue

news/2024/11/17 2:29:57/

路由配置

import Vue from 'vue'

import VueRouter from 'vue-router'

import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [{

    path: '/',

    name: 'Home',

    component: Home

  },

]

const router = new VueRouter({

  routes

})

export default router

main.js

 

import Vue from 'vue'

import App from './App.vue'

import router from './router'

import store from './store'

import VueAwesomeSwiper from 'vue-awesome-swiper'

import 'swiper/css/swiper.css'

Vue.use(VueAwesomeSwiper)


 

Vue.config.productionTip = false

new Vue({

  router,

  store,

  render: h => h(App)

}).$mount('#app')

APP.vue

<template>

  <div id="app">

    <router-view />

  </div>

</template>

<style lang="scss">

* {

  margin: 0;

  padding: 0;

  list-style: none;

  outline: none;

  text-decoration: none;

}

.flex {

  display: flex;

}

.j-c {

  justify-content: center;

}

.j-s {

  justify-content: space-between;

}

.a-c {

  align-items: center;

}

#app {

  width: 1200px;

  margin: 0 auto;

}

</style>

Banner.vue

 

<template>

  <div class="banner">

    <div class="box">

      <ul>

        <li v-for="(item, index) in list" :key="index" class="flex j-s a-c">

          {{ item }}<span>&gt;</span>

        </li>

      </ul>

      <img src="image/T1vWdTBKDv1RXrhCrK.jpg" alt="" />

    </div>

  </div>

</template>

<script>

export default {

  name: "Banner",

  data() {

    return {

      list: [

        "手机  平板",

        "电视  盒子",

        "路由器  智能配件",

        "移动电源  插线板",

        "耳机  音箱",

        "电池  存储卡",

        "保护套  后盖",

        "贴膜  其它配件",

        "米兔  服装",

        "背包  其它周边",

      ],

    };

  },

};

</script>

<style scoped lang='scss'>

.banner {

  width: 1100px;

  height: 500px;

  padding: 0 30px;

  box-sizing: border-box;

  margin: 0 auto;

  .box {

    position: relative;

    img {

      width: 1040px;

      height: 500px;

    }

    ul {

      position: absolute;

      display: flex;

      flex-direction: column;

      justify-content: space-between;

      width: 220px;

      height: 500px;

      box-sizing: border-box;

      background-color: rgba(61, 60, 60, 0.8);

      color: #fff;

      cursor: pointer;

      font-size: 13px;

      padding: 15px 0;

      li {

        padding: 10px;

        padding-left: 20px;

        span {

          display: block;

          font-size: 20px;

        }

      }

      li:hover {

        background-color: rgba(168, 51, 2, 0.2);

      }

    }

  }

}

</style>

Bootentry.vue

 

 

 

<template>

  <div class="bootentry flex j-s">

    <ul class="list flex a-c">

      <li v-for="(item, index) in list" :key="index" class="item flex">

        {{ item.title }}

        <span>{{ item.content }}</span>

      </li>

    </ul>

    <div><img src="/image/T184E_BQWT1RXrhCrK.jpg" alt="" /></div>

    <div><img src="/image/T1yvd_BQDT1RXrhCrK.jpg" alt="" /></div>

    <div><img src="/image/T1mahQBmKT1RXrhCrK.jpg" alt="" /></div>

  </div>

</template>

<script>

export default {

  name: "Bootentry",

  data() {

    return {

      list: [

        {

          title: "START",

          content: "开放购买",

        },

        {

          title: "GROUND",

          content: "企业团购",

        },

        {

          title: "RETROFIT",

          content: "官方产品",

        },

        {

          title: "CHANNEL",

          content: "F码通道",

        },

        {

          title: "RECHARGE",

          content: "话费充值",

        },

        {

          title: "SECURITY",

          content: "防伪检查",

        },

      ],

    };

  },

};

</script>

<style scoped lang='scss'>

.bootentry {

  width: 1040px;

  height: 180px;

  margin: 0 auto;

  margin-top: 10px;

  box-sizing: border-box;

  font-size: 13px;

  .list {

    width: 220px;

    height: 180px;

    background-color: #5f5750;

    color: white;

    flex-wrap: wrap;

    justify-content: space-between;

    .item {

      flex-direction: column;

      width: 67px;

      height: 55px;

      align-items: center;

      justify-content: space-between;

      margin: 0 2px 5px 0;

      span {

        border: none;

      }

    }

    :first-child {

      border-right: 1px solid #888;

      border-bottom: 1px solid #888;

    }

    :nth-child(2) {

      border-right: 1px solid #888;

      border-bottom: 1px solid #888;

      border-left: 1px solid #888;

    }

    :nth-child(3) {

      border-bottom: 1px solid #888;

      border-left: 1px solid #888;

    }

    :nth-child(4) {

      border-top: 1px solid #888;

      border-right: 1px solid #888;

      padding: 10px 0 0 0;

    }

    :nth-child(5) {

      border-top: 1px solid #888;

      border-right: 1px solid #888;

      border-left: 1px solid #888;

      padding: 10px 0 0 0;

    }

    :last-child {

      border-top: 1px solid #888;

      border-left: 1px solid #888;

      padding: 10px 0 0 0;

    }

  }

  img {

    height: 180px;

    width: 260px;

  }

}

</style>

 

 

 

<template>

  <div class="footer">

    <div class="title">

      <ul class="flex">

        <li>1小时快修服务</li>

        <li>|</li>

        <li>7天无理由退货</li>

        <li>|</li>

        <li>15天免费换货</li>

        <li>|</li>

        <li>满150元包邮</li>

        <li>|</li>

        <li>520余家售后网点</li>

      </ul>

    </div>

    <div class="nav flex a-c">

      <div class="left flex">

        <ul>

          <li>帮助中心</li>

          <li>购物指南</li>

          <li>支付方式</li>

          <li>配送方式</li>

        </ul>

        <ul>

          <li>服务支持</li>

          <li>售后政策</li>

          <li>自助服务</li>

          <li>相关下载</li>

        </ul>

        <ul>

          <li>大米之家</li>

          <li>大米之家</li>

          <li>服务网点</li>

          <li>预约亲临到店服务</li>

        </ul>

        <ul>

          <li>关注我们</li>

          <li>新浪微博</li>

          <li>大米部落</li>

          <li>官方微信</li>

        </ul>

      </div>

      <div class="right">

        <p>400-100-5678</p>

        <p>周一至周日 8:00-18:00</p>

        <p>（仅收市话费）</p>

        <p>24小时在线客服</p>

      </div>

    </div>

    <div class="last flex">

      <div class="logo">

        <img src="/image/mi-logo.png" alt="" />

      </div>

      <p>

        大米网|MIUI|米聊|多看书城|大米路由器|大米后院|大米天猫店|大米淘宝直营店|大米网盟|问题反馈|Select

        Region 5555555号

      </p>

    </div>

  </div>

</template>

<script>

export default {

  name: "Footer",

};

</script>

<style scoped lang='scss'>

.footer {

  width: 1150px;

  margin: 0 auto;

  height: 320px;

  .title {

    width: 90%;

    margin: 0px auto;

    border-bottom: 1px solid #bebebe;

    cursor: pointer;

    height: 65px;

    color: #9d9d9d;

    ul {

      width: 900px;

      height: 80px;

      margin: 0 auto;

      align-items: center;

      justify-content: center;

      li {

        margin: 10px;

        padding-right: 10px;

      }

    }

  }

  .nav {

    width: 90%;

    height: 170px;

    margin: 10px auto;

    .left {

      width: 70%;

      padding: 10px 80px;

      color: #bebebe;

      ul {

        width: 25%;

        margin-left: 20px;

        li {

          margin-top: 10px;

          font-size: 13px;

          color: gray;

          cursor: pointer;

        }

        :first-child {

          color: black;

          font-weight: bold;

          font-size: 14px;

          margin-bottom: 25px;

        }

      }

    }

    .right {

      width: 20%;

      height: 100px;

      border-left: 1px solid #ccc;

      box-sizing: border-box;

      p {

        text-align: center;

        font-size: 12px;

        margin-bottom: 2px;

      }

      p:hover {

        text-decoration: underline;

      }

      :first-child {

        font-size: 16px;

        color: #ff7600;

        font-weight: bold;

        margin-bottom: 4px;

      }

      :last-child {

        width: 90px;

        margin: 10px auto;

        border: 1px solid #ff7600;

        padding: 5px;

        color: #ff7600;

        background-color: #fff;

        font-weight: bold;

      }

      :last-child:hover {

        background-color: #ff7600;

        text-decoration: none;

        color: white;

      }

    }

  }

  .last {

    width: 90%;

    height: 50px;

    margin: 10px auto;

    background-color: #fafafa;

    color: #757575;

    .logo {

      width: 30px;

      height: 30px;

      background-color: #ff6700;

      img {

        width: 30px;

        height: 30px;

      }

    }

    p {

      font-size: 13px;

      margin-left: 5px;

    }

  }

}

</style>

Hardware.vue

 

 

<template>

  <div class="hardware">

    <p>智能硬件</p>

    <div class="flex j-s">

      <div class="left">

        <img src="/image/T1IhLjBC_T1RXrhCrK.jpg" alt="" />

      </div>

      <div class="flex j-s right">

        <div v-for="(item, index) in hardware" :key="index">

          <img :src="item.imgsrc" alt="" />

          <p>{{ item.title }}</p>

          <p>{{ item.desc }}</p>

          <p>{{ item.price }}</p>

        </div>

      </div>

    </div>

  </div>

</template>

<script>

export default {

  name: "Hardware",

  props: ["hardware"],

};

</script>

<style scoped lang='scss'>

.hardware {

  margin: 0 auto;

  height: 700px;

  width: 1150px;

  background-color: #f5f5f5;

  padding: 20px 30px;

  box-sizing: border-box;

  p {

    margin-bottom: 10px;

    color: #424242;

    font-weight: bold;

  }

  .left {

    width: 19%;

  }

  .right {

    width: 78%;

    flex-wrap: wrap;

    align-items: center;

    div {

      width: 24%;

      height: 302px;

      background-color: #ffffff;

      padding: 0 2px;

      img {

        margin: 0 auto;

        display: block;

        margin-bottom: 20px;

      }

      :nth-child(2) {

        font-size: 14px;

        text-align: center;

      }

      :nth-child(3) {

        font-size: 13px;

        text-align: center;

        color: #bebebe;

      }

      :last-child {

        color: #ff7600;

        text-align: center;

      }

    }

  }

}

</style>

Header.vue

 

<template>

  <div class="header flex j-s a-c">

    <div class="left">

      <ul class="flex">

        <li v-for="(item, index) in list1" :key="index" class="item">

          <span>{{ item }}</span> |

        </li>

      </ul>

    </div>

    <div class="right">

      <ul class="flex">

        <li class="submit">登录 | 注册</li>

        <li class="shopping">购物车（0）</li>

      </ul>

    </div>

  </div>

</template>

<script>

export default {

  name: "Header",

  data() {

    return {

      list1: [

        "大米网",

        "MIUI",

        "米聊",

        "游戏",

        "多看阅读",

        "云服务",

        "大米移动版",

        "问题反馈",

        "Select Region",

      ],

    };

  },

};

</script>

<style scoped lang='scss'>

.header {

  height: 40px;

  background-color: #333;

  color: #b0b0b0;

  margin: 0 auto;

  width: 1150px;

  .left {

    font-size: 12px;

    margin-left: 45px;

    cursor: pointer;

    span {

      margin: 0 10px;

    }

    span:hover {

      color: white;

    }

  }

  .right {

    font-size: 15px;

    margin-right: 17px;

    cursor: pointer;

    .submit:hover {

      color: white;

    }

    .shopping:hover {

      color: white;

    }

    :first-child {

      margin-right: 30px;

    }

  }

}

</style>

Hotgoods.vue 

 

 

<template>

  <div class="hotgoods">

    <div class="title flex j-s">

      <p>大米明星单品</p>

      <div class="flex">

        <div class="lt">&lt;</div>

        <div class="gt">&gt;</div>

      </div>

    </div>

    <div class="content flex j-s">

      <div v-for="(item, index) in hotgoods" :key="index">

        <img :src="item.imgsrc" />

        <p>{{ item.title }}</p>

        <p>{{ item.desc }}</p>

      </div>

    </div>

  </div>

</template>

<script>

export default {

  name: "Hotgoods",

  props: ["hotgoods"],

};

</script>

<style scoped lang='scss'>

.hotgoods {

  width: 1040px;

  height: 280px;

  margin: 10px auto;

  box-sizing: border-box;

  .title {

    margin-bottom: 10px;

    .lt {

      width: 40px;

      height: 20px;

      text-align: center;

      margin-right: 5px;

      border: 1px solid #f0f0f0;

      color: #bebebe;

      cursor: pointer;

    }

    .gt {

      width: 40px;

      height: 20px;

      text-align: center;

      color: #bebebe;

      border: 1px solid #f0f0f0;

      cursor: pointer;

    }

  }

  .content {

    div {

      width: 19%;

      border-top: 1px solid #ff7600;

      background-color: #fafafa;

      img {

        margin: 0 auto;

        display: block;

      }

      :nth-child(2) {

        color: #333;

        font-size: 14px;

        text-align: center;

        margin: 10px 0 15px 0;

      }

      :last-child {

        color: #b0b0b0;

        font-size: 13px;

        text-align: center;

      }

    }

  }

}

</style>

Menu.vue

 

<template>

  <div class="menu flex j-s a-c">

    <div><img src="/image/xiaomi_logo.png" alt="" /></div>

    <div>

      <ul class="list flex">

        <li v-for="(item, index) in menu" :key="index" class="item">

          {{ item }}

        </li>

      </ul>

    </div>

    <div class="flex">

      <input type="text" />

      <p>GO</p>

    </div>

  </div>

</template>

<script>

export default {

  name: "Menu",

  data() {

    return {

      menu: [

        "大米手机",

        "红米",

        "平板",

        "电视",

        "盒子",

        "路由器",

        "智能硬件",

        "服务",

        "社区",

      ],

    };

  },

};

</script>

<style scoped lang='scss'>

.menu {

  width: 1100px;

  height: 50px;

  padding: 40px 30px;

  margin: 0 auto;

  box-sizing: border-box;

  .list {

    margin-left: 80px;

    .item {

      margin: 10px;

      cursor: pointer;

    }

    .item:hover {

      color: #ff6700;

    }

  }

  input {

    height: 40px;

    border: 1px solid #f0f0f0;

  }

  p {

    width: 40px;

    height: 40px;

    font-size: 20px;

    border: 1px solid #f0f0f0;

    text-align: center;

    font-weight: bold;

    line-height: 40px;

    cursor: pointer;

  }

}

</style>

store index.js

 

 

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({

  state: {

    hotgoods: [{

        "imgsrc": "image/T1riKjB7VT1RXrhCrK.jpg",

        "title": "大米电视2/2S 全系列",

        "desc": "40/48/49/55英寸 现货购买"

      },

      {

        "imgsrc": "image/T19AbjBCDT1RXrhCrK.jpg",

        "title": "大米平板",

        "desc": "全球首款 NVIDIA Tegra K1 平板"

      },

      {

        "imgsrc": "image/T1meZjBCAT1RXrhCrK.jpg",

        "title": "大米盒子增强版 1G",

        "desc": "首款4K超高清网络机顶盒"

      },

      {

        "imgsrc": "image/T1tsEgB7DT1RXrhCrK.jpg",

        "title": "全新大米路由器",

        "desc": "顶配路由器，企业级性能"

      },

      {

        "imgsrc": "image/T10TJjB5hT1RXrhCrK.jpg",

        "title": "大米头戴式耳机",

        "desc": "媲美主流千元级头戴耳机"

      }

    ],

    hardware: [{

        "imgsrc": "image/T1odEjB5bT1RXrhCrK.jpg",

        "title": "大米智能家庭套装",

        "desc": "3分钟快速安装，30多种智能玩法",

        "price": "199元"

      },

      {

        "imgsrc": "image/T1JKxvBXhv1RXrhCrK.jpg",

        "title": "大米随身WIFI 8GB U盘版",

        "desc": "随身上网神器，内置8GB U盘",

        "price": "49.9元"

      },

      {

        "imgsrc": "image/T18yZQBCET1RXrhCrK.jpg",

        "title": "小蚁智能摄像机",

        "desc": "能看能听能说，手机远程观看",

        "price": "149元"

      },

      {

        "imgsrc": "image/T1YoZQByYT1RXrhCrK.jpg",

        "title": "大米体重称",

        "desc": "高精度压力传感器 ｜ 手机管理全家健康",

        "price": "99元"

      },

      {

        "imgsrc": "image/T16nVjBCKT1RXrhCrK.jpg",

        "title": "小蚁运动机",

        "desc": "边玩边录边拍，手机随时分享",

        "price": "399元"

      },

      {

        "imgsrc": "image/T18zWQB4WT1RXrhCrK.jpg",

        "title": "大米路由器 mini",

        "desc": "主流双频AC智能路由器，性价比之王",

        "price": "129元"

      },

      {

        "imgsrc": "image/T1oixjB5bT1RXrhCrK.jpg",

        "title": "大米智能插座",

        "desc": "手机远程遥控开关，带USB接口",

        "price": "59元"

      },

      {

        "imgsrc": "image/T1KzbQBvbT1RXrhCrK.jpg",

        "title": "大米水质TDS检测笔",

        "desc": "准确检测家中水质纯度",

        "price": "39元"

      }

    ]

  },

  mutations: {},

  actions: {},

  modules: {}

})

 

 


http://www.ppmy.cn/news/574409.html

相关文章

计算机图形学 期末复习 微课版 孔令德 一、导论 期末复习

计算机图形学 期末复习 微课版 孔令德 一、导论 期末复习

计算机图形学是一门研究如何利用计算机表示、生成、处理和显示图形的学科 计算机图形学是研究如何利用计算机把描述图形的几何模型通过指定的算法和程序转化为图像并进行显示的一门学科 图形的表示方法为参数法和点阵法。 一般用参数法描述的图形仍然称为图形&#xff08;graph…
阅读更多...
华硕服务器系统都还原不了,windows10系统还原失败怎么办|windows10系统还原失败如何解决...

华硕服务器系统都还原不了,windows10系统还原失败怎么办|windows10系统还原失败如何解决...

很多朋友都遇到过windows10系统还原失败的问题&#xff0c;那么我们该如何摆脱它呢&#xff1f;一些用户会使用win10重置功能来解决&#xff0c;但是如果重置失败&#xff0c;会出现无限重启或inaccessible boot device&#xff0c;太麻烦了。这次小编就教大家利用开机还原软件…
阅读更多...
win7计算机属 系统还原,如何设置win7系统还原方法以在win7计算机上还原系统

win7计算机属 系统还原,如何设置win7系统还原方法以在win7计算机上还原系统

‍ 如何设置win7系统还原&#xff1f; 732个系统旗舰版本的用户回答说&#xff0c;需要恢复系统错误才能解决该问题. 那么如何设置呢&#xff1f;下面的编辑器将告诉您设置还原的具体方法. 具体解决方案: 1. 首先在开始菜单中打开控制面板. 打开控制面板后&#xff0c;打开控制…
阅读更多...
操作系统真象还原第1章：部署工作环境

操作系统真象还原第1章：部署工作环境

前言 关于自制操作系统&#xff0c;一开始本来是想利用极客时间的操作系统实战45讲来的&#xff08;为了能够更快完成&#xff09;&#xff0c;然而当自己真正去学的时候才发现这些视频还是比较坑的&#xff0c;最起码对于我来说&#xff0c;首先是代码注释很少&#xff0c;函…
阅读更多...
服务器2012还原系统,Windows Server 2012如何进行系统映像还原

服务器2012还原系统,Windows Server 2012如何进行系统映像还原

对于管理来说，内建于Windows Server 2008和更高版本Windows Server的Windows Server Backup应用程序是一个小金矿。Windows Server 2012延续了Windows Server Backup应用程序的遗产，这是一个伟大的功能。应用程序失败或者更新安装出现bug之后，此功能对于将计算机恢复到可用状…
阅读更多...
linux快速还原oracle,linux系统还原oracle数据库

linux快速还原oracle,linux系统还原oracle数据库

linux系统还原oracle数据库 linux系统还原oracle数据库 作为一名测试人员，搜索相关操作，大多数都是先来一大篇理论知识，奈于时间考虑，希望直接上手操作，废话不多说，直接上操作, 前提 1：工具：xshell 2：oracle的备份文件 操作 1)：通过xshell连接到linux服务器 2)在命令…
阅读更多...
计算机系统中设置保护系统还原,[如何] 在 Windows 10 中配置和使用系统还原 | MOS86...

计算机系统中设置保护系统还原,[如何] 在 Windows 10 中配置和使用系统还原 | MOS86...

系统还原又名上次已知的良好配置在解决各种版本的Windows相关问题方面发挥了至关重要的作用。基本上&#xff0c;当创建系统还原点时&#xff0c;系统会保存当前Windows操作系统的映像&#xff0c;当您尝试还原时&#xff0c;该映像实际上已还原。 在我们的文章中&#xff0c;有…
阅读更多...
weiPe系统启动盘还原

weiPe系统启动盘还原

weiPe系统启动盘还原 一、使用电脑还原 1、打开我的电脑右键&#xff0c;选择管理&#xff08;我的电脑不是快捷方式&#xff0c;是电脑桌面–>个性化–>主题–>桌面图标设置–>勾选我的电脑&#xff09; 2、选择磁盘管理 3、找到系统盘的EFI分区删除 4、剩下最后…
阅读更多...
最新文章

Copyright @ 2022~2023