!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" titlekissme/title link rel="stylesheet" href="./test.css" /head
<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" > <span><img src="./icon_30uolhe0jd1/fruit-icons-.png" ></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="http://img.558idc.com/uploadfile/allimg/210612/123Q3BE-6.png" > <span><img src="./icon_30uolhe0jd1/fruitslice.png" ></span> <span class="ulspan">叫我再吃</span> <span class="more">更多<img src="./icon_30uolhe0jd1/右箭头.png" ></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/ [email protected]/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>