<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>kissme</title>
<link rel="stylesheet" href="./test.css">
</head>
<body>
<!-- 导航栏 -->
<header class="top-header">
<a class="search-left">樱桃</a>
<!-- 导航栏默认内容 -->
<div class="search-mid">
<span><img src="./icon_30uolhe0jd1/niuyouguo.png"></span>
<input type="text" placeholder="有好吃的再叫我">
<span><img src="./icon_30uolhe0jd1/shuiguopingguo.png"></span>
</div>
<a class="search-right">苹 果</a>
</header>
<div class="root box">
<!-- 主体内容 -->
<main class="main">
<!-- 好货区域 -->
<div class="left">
<!-- 有好货 -->
<p class="ul-top">
<img class="ulimg" src="./1.png" alt="">
<span><img src="./icon_30uolhe0jd1/fruit-icons-.png" alt=""></span>
<span class="ulspan">有好吃的再叫我</span>
</p>
<!-- 传入数据 -->
<ul class="list">
<a href="javascript:">
<li v-for=\'(it,k) in listleft\' :key=\'k\'>
<!-- 图文描述 -->
<span class="img"> <img :src="it.imgUrl" alt="图"></span>
<!-- 两句废话 -->
<p class="leftdetal">{{it.leftdetal}}</p>
<p class="desc">{{it.desc}}</p>
<!-- 没人说好 -->
<div class="icon-say">
<span class="icon"><img :src="it.icon"></span>
<p class="say">{{it.say}}</p>
</div>
</li>
</a>
</ul>
</div>
<div class="right">
<!-- 爱逛街 -->
<p class="ul-top">
<img class="ulimg" src="https://img.alicdn.com/tfs/TB1UNX2bSFRMKJjy0FhXXX.xpXa-112-46.png" alt="">
<span><img src="./icon_30uolhe0jd1/fruitslice.png" alt=""></span>
<span class="ulspan">叫我再吃</span>
<span class="more">更多<img src="./icon_30uolhe0jd1/右箭头.png" alt=""></span>
</p>
<!-- 传输数据 -->
<ul class="list">
<a href="javascript:">
<li v-for=\'(it,k) in listright\' :key=\'k\'>
<span class="img"> <img :src="it.imgUrl"></span>
<p class="rightdetal">{{it.rightdetal}}</p>
<div class="icon-say">
<span class="icon"><img :src="it.icon"></span>
<p class="say">{{it.say}}</p>
</div>
</li>
</a>
</ul>
</div>
</main>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script>
let app =
new Vue({
el: ".root",
data: {
listleft: [{
imgUrl: \'https://img.alicdn.com/imgextra/i1/3107144874/TB2i9NXbwkLL1JjSZFpXXa7nFXa_!!3107144874-0-beehive-scenes.jpg_180x180xzq90.jpg_.webp\',
leftdetal: \'max破产都要买的口红\',
desc: \'《破产姐妹》max最爱Tarte哑光口红笔\',
icon: \'./icon_30uolhe0jd1/DragonFruit.png\',
say: \'5959 人说好\'
}, {
imgUrl: \'https://img.alicdn.com/tfscom/i2/256691439/TB2wjP9bXgkyKJjSspfXXcj1XXa_!!256691439.jpg_180x180xzq90.jpg_.webp\',
leftdetal: \'Gogan 冰种玉镯\',
desc: \'极品冰种质地，视觉效果通透莹润。\',
icon: \'./icon_30uolhe0jd1/fruit-icons-_1.png\',
say: \'206 人说好\'
}, {
imgUrl: \'https://img.alicdn.com/imgextra/i2/3208450429/TB2Gpy2weuSBuNjSsziXXbq8pXa_!!3208450429-0-beehive-scenes.jpg_180x180xzq90.jpg_.webp\',
leftdetal: \'碎脂机，超快瘦身\',
desc: \'这个精美的碎脂机，不仅采用独特的外形的设计，结合上小巧的尺寸，让其方便你外出时随身携带哦。功能非常的强劲，短时间内就可以感受到脂肪在燃烧哦。\',
icon: \'./icon_30uolhe0jd1/fruit-icons-_2.png\',
say: \'127 人说好\'
}, {
imgUrl: \'https://img.alicdn.com/imgextra/i3/15353738/TB2HDHAqN9YBuNjy0FfXXXIsVXa_!!15353738-0-beehive-scenes.jpg_180x180xzq90.jpg_.webp\',
leftdetal: \'5克拉钻石戒指女豪华皇冠群镶副钻\',
desc: \'宝贝很漂亮的超级闪，质量很好，做工非常精细，包装特别精致，超级豪华，圈口大小合适，戴着很合适，非常精美，时尚百搭，很满意。\',
icon: \'./icon_30uolhe0jd1/fruit-icons-_3.png\',
say: \'67 人说好\'
}, {
imgUrl: \'https://img.alicdn.com/tfscom/i1/TB1e3Heo_JYBeNjy1zeYXGhzVXa_M2.SS2_180x180xzq90.jpg_.webp\',
leftdetal: \'为小户型省空间，北欧铁艺多功能高铺床\',
desc: \'北欧简约设计，为小户型省空间\',
icon: \'./icon_30uolhe0jd1/fruit-icons-_7.png\',
say: \'307 人说好\'
}, {
imgUrl: \'https://img.alicdn.com/imgextra/i1/693739777/TB2TW6MtwxlpuFjy0FoXXa.lXXa_!!693739777-0-daren.jpg_180x180xzq90.jpg_.webp\',
leftdetal: \'ZIIIRO手表\',
desc: \'采用现代设计，让时间显示犹如日食奇观重现，引爆眼球\',
icon: \'./icon_30uolhe0jd1/fruit-icons-_4.png\',
say: \'19520 人说好\'
}, ],
listright: [{
imgUrl: \'https://img.alicdn.com/tfscom/i1/28306811/TB2FK.jbTJ_SKJjSZPiXXb3LpXa_!!28306811.jpg_180x180xzq90.jpg_.webp\',
rightdetal: \'外套\',
icon: \'./icon_30uolhe0jd1/fruit-icons-_6.png\',
say: \'猫***i\'
}, {
imgUrl: \'https://img.alicdn.com/tfscom/i1/1915931953/TB2ZUmPjVXXXXb0XXXXXXXXXXXX_!!1915931953.jpg_180x180xzq90.jpg_.webp\',
rightdetal: \'墙角，是厨房收纳的好地方\',
icon: \'./icon_30uolhe0jd1/fruit-icons-_5.png\',
say: \'尚***志\'
}, {
imgUrl: \'https://img.alicdn.com/tfscom/i3/647496075/TB2mFYjp5C9MuFjSZFoXXbUzFXa_!!647496075.png_180x180xzq90.jpg_.webp\',
rightdetal: \'粗跟复古布洛克鞋\',
icon: \'./icon_30uolhe0jd1/fruit-icons-_8.png\',
say: \'M***Y\'
},
{
imgUrl: \'https://img.alicdn.com/tfscom/i3/12840958/TB26Obeot0opuFjSZFxXXaDNVXa_!!12840958.jpg_180x180xzq90.jpg_.webp\',
rightdetal: \'这只火烈鸟承包我一整年的少女心\',
icon: \'./icon_30uolhe0jd1/fruits.png\',
say: \'灵***社\'
}, {
imgUrl: \'https://img.alicdn.com/tfscom/i5/TB1SbQqf4uaVKJjSZFjYXIjmpXa_M2.SS2_180x180xzq90.jpg_.webp\',
rightdetal: \'迷你手拎金属茶几文艺清新\',
icon: \'./icon_30uolhe0jd1/fruit-icons-_1.png\',
say: \'软***i\'
}, {
imgUrl: \'https://img.alicdn.com/tfscom/i1/1133315223/TB2yK8oaxf9F1JjSZFDXXXyUpXa_!!1133315223.jpg_180x180xzq90.jpg_.webp\',
rightdetal: \'玩味拼色主义\',
icon: \'./icon_30uolhe0jd1/fruit-icons-_1.png\',
say: \'觅***夏\'
},
]
}
})
</script>
</body>
</html>