作业test

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

</script>
<style scoped>

.wrap {

width: 1100px;

margin: 0 auto;

}
<span class="hljs-selector-class">.wrap</span><span class="hljs-selector-pseudo">:after</span> {
    <span class="hljs-attribute">content</span>: <span class="hljs-string">''</span>;
    <span class="hljs-attribute">display</span>: block;
    <span class="hljs-attribute">clear</span>: 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>
<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>

</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;

}
<span class="hljs-selector-class">.content</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">1200px</span>;
    <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span> auto;
    <span class="hljs-comment">/*background-color: red;*/</span>
    <span class="hljs-attribute">height</span>: <span class="hljs-number">60px</span>;
}

<span class="hljs-selector-class">.content</span> <span class="hljs-selector-tag">ul</span> <span class="hljs-selector-tag">li</span> {
    <span class="hljs-attribute">float</span>: left;
}

<span class="hljs-selector-class">.logo</span> {
    <span class="hljs-attribute">padding-top</span>: <span class="hljs-number">10px</span>;
    <span class="hljs-attribute">padding-right</span>: <span class="hljs-number">50px</span>;
    <span class="hljs-attribute">cursor</span>: pointer;
}

<span class="hljs-selector-class">.logo</span> <span class="hljs-selector-tag">img</span> {
    <span class="hljs-attribute">height</span>: <span class="hljs-number">60px</span>;
    <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;
}

<span class="hljs-selector-class">.route</span> {
    <span class="hljs-attribute">padding</span>: <span class="hljs-number">15px</span> <span class="hljs-number">10px</span> <span class="hljs-number">0</span>;
}

<span class="hljs-selector-class">.route</span> <span class="hljs-selector-tag">a</span> {
    <span class="hljs-attribute">padding-bottom</span>: <span class="hljs-number">5px</span>;
    <span class="hljs-attribute">border-bottom</span>: <span class="hljs-number">3px</span> solid transparent;
}

<span class="hljs-selector-class">.route</span> <span class="hljs-selector-tag">a</span><span class="hljs-selector-class">.router-link-exact-active</span> {
    <span class="hljs-attribute">color</span>: orange;
    <span class="hljs-attribute">border-bottom-color</span>: 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) {
            <span class="hljs-keyword">this</span>.$router.push({ <span class="hljs-attr">name</span>: <span class="hljs-string">'car-detail'</span>, <span class="hljs-attr">query</span>: {<span class="hljs-attr">pk</span>: pk}
            });

        }
    },

}

</script>
<style scoped>

.car-tag {

width: 200px;

border-radius: 10px;

overflow: hidden;

background-color: #eee;

float: left;

margin: 10px;

}
<span class="hljs-selector-class">.car-tag</span> <span class="hljs-selector-tag">img</span> {
    <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;
    <span class="hljs-attribute">height</span>: <span class="hljs-number">240px</span>;
}

<span class="hljs-selector-class">.car-tag</span> <span class="hljs-selector-tag">a</span> {
    <span class="hljs-attribute">text-align</span>: center;
    <span class="hljs-attribute">font-weight</span>: normal;
    <span class="hljs-attribute">font-size</span>: <span class="hljs-number">20px</span>;
    <span class="hljs-attribute">display</span>: block;
}

</style>