vue作业3

views

Car

<template>
    <div class="car">
        <Nav/>
        <div class="wrap">
            <CarTag v-for="car in cars" :car="car"></CarTag>
        </div>
    </div>
</template>

<script>
    import Nav from '../components/Nav'
    import CarTag from '../components/CarTag'

    export default {
        name: "Car",
        data() {
            return {
                car: [],
            }
        },
        components: {
            Nav,
            CarTag,
        },
        created() {
            this.cars = [
                {
                    id: 1,
                    title: '汽车1',
                    img: require('@/assets/img/001.jpg'),
                    detail:'请问饿哦哈萨克等哈考试的哈萨克接电话'
                },
                {
                    id: 2,
                    title: '汽车2',
                    img: require('@/assets/img/002.jpg'),
                    detail:'请问饿哦哈萨啥都离开挤出来小女子新材料科技'
                },
                {
                    id: 3,
                    title: '汽车3',
                    img: require('@/assets/img/003.jpg'),
                    detail:'箱子里扣除是脑子里扣除建筑垃圾拉建档立卡电脑桌擦拭的'
                },
            ]
        }
    }
</script>

<style scoped>
    .wrap {
        width: 1100px;
        margin: 0 auto;
    }

    .wrap:after {
        content: '';
        display: block;
        clear: both;
    }
</style>

home

<template>
    <div class="home">
      <Nav />
      <h2>汽车系统</h2>
    </div>
</template>

<script>
    import Nav from '../components/Nav'
    export default {
      data(){
        return{
          back_data:''
        }
      },
      components:{
        Nav,
      },
    }
</script>

<style scoped>

</style>

components

Nav

<template>
    <div class="nav">
        <div class="content">
            <ul>
                <li class="logo">
                    <img src="../assets/img/111.jpg" alt="" @click="goHome">
                </li>
                <li class="route">
                    <router-link to="/">主页</router-link>
                </li>
                <li class="route">
                    <router-link :to="{name: 'car'}">汽车页</router-link>
                </li>
            </ul>
        </div>

    </div>
</template>

<script>
    export default {
        name: "Nav",
        methods: {
            goHome() {
                if (this.$route.path !== '/') {
                    this.$router.push({
                        name: 'home'
                    });
                }
            }
        }
    }
</script>

<style scoped>
    .nav {
        width: 100%;
        height: 60px;
        background-color: white;
    }

    .content {
        width: 1200px;
        margin: 0 auto;
        /*background-color: red;*/
        height: 60px;
    }

    .content ul li {
        float: left;
    }

    .logo {
        padding-top: 10px;
        padding-right: 50px;
        cursor: pointer;
    }

    .logo img {
        height: 60px;
        margin: 0;
    }

    .route {
        padding: 15px 10px 0;
    }

    .route a {
        padding-bottom: 5px;
        border-bottom: 3px solid transparent;
    }

    .route a.router-link-exact-active {
        color: orange;
        border-bottom-color: orange;
    }
</style>

cartag

<template>
    <div class="car-tag">
        <img :src="car.img" alt="" @click="goDetail(car.id)">
        <router-link :to="`/car/${car.id}/detail`">{{car.title}}</router-link>
    </div>
</template>

<script>
    export default {
        name: "CarTag",
        props: ['car'],
        methods: {
            goDetail(pk) {

                this.$router.push({ name: 'car-detail', query: {pk: pk}
                });

            }
        },

    }
</script>

<style scoped>
    .car-tag {
        width: 200px;
        border-radius: 10px;
        overflow: hidden;
        background-color: #eee;
        float: left;
        margin: 10px;
    }

    .car-tag img {
        width: 100%;
        height: 240px;
    }

    .car-tag a {
        text-align: center;
        font-weight: normal;
        font-size: 20px;
        display: block;
    }
</style>