day46--webday08(详情页面)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import CSS -->
<link rel="stylesheet" href="css/eui.css">
<style>
body {
font: 18px "Microsoft YaHei UI";
margin: 0;
}
a {
text-decoration: none;
color: #6c6c6c;
}
header a:hover {
color: #0aa1ed;
}
/*去掉自带的内边距*/
.el-table .el-table__cell {
padding: 0;
}
</style>
</head>
<body>
<div id="app">
<el-container>
<el-header style="padding: 0;height: 150px;">
<div style="width:1200px;margin: 0 auto;">
<img src="imgs/logo.png" style="width:300px ;vertical-align:middle" alt="">
<span>
<a href="">首页</a>
<el-divider direction="vertical"></el-divider>
<a href="">热点资讯</a>
<el-divider direction="vertical"></el-divider>
<a href="">社会招聘</a>
<el-divider direction="vertical"></el-divider>
<a href="">校园招聘</a>
<el-divider direction="vertical"></el-divider>
<a href="">帮助中心</a>
</span>
</div>
<!-- 蓝色导航条start -->
<div style="width: 100%;height: 60px; background-color: #82c8ec;">
<el-menu style="width:1200px; margin:0 auto" default-active="1" class="el-menu-demo"
mode="horizontal" @select="handleSelect" background-color="#82c8ec" text-color="#fff"
active-text-color="#fff">
<el-menu-item index="1">精彩活动</el-menu-item>
<el-menu-item index="2">当季女装</el-menu-item>
<el-menu-item index="3">品牌男装</el-menu-item>
<el-menu-item index="4">环球美食</el-menu-item>
<el-menu-item index="5">医药健康</el-menu-item>
<el-menu-item index="6">美妆彩妆</el-menu-item>
<el-menu-item index="7">母婴产品</el-menu-item>
<!-- 导航条start -->
<div style="float: right;">
<el-input size="mini" placeholder="请输入关键字" style="margin-top: 15px;"></el-input>
<el-button
style="position: absolute; background-color: rgba(0, 0, 0, 0);border: 0; right: 0;top: 11px;"
icon="el-icon-search"></el-button>
</div>
<!-- 导航条end -->
</el-menu>
</div>
<!-- 蓝色导航条end -->
</el-header>
<el-main style="width:1200px;margin: 0 auto;">
<el-row gutter="20" style="margin-top: 20px;">
<el-col span="12">
<el-card>
<img src="imgs/a.jpg" style="width: 100%;height: 100%;" alt="">
</el-card>
</el-col>
<el-col span="12">
<h3>森马牛仔裤女宽松慢跑裤运动风2022春季新款显瘦束脚长裤复古</h3>
<el-divider></el-divider>
<div style="font-size: 12px; color: #6c6c6c;">
<span>销量:334</span>
<span>浏览量:25</span>
<p style="font-weight: bold;">
<span style="font-size: 15px; color: black;">￥654</span>
<span>原价: <span style="text-decoration:line-through ;">3453</span> </span>
</p>
</div>
<el-row gutter="20" style=" text-align: center">
<el-col span="8" v-for="item in scanArr">
<el-card>
<img :src="item.url" alt="">
</el-card>
<span>
{{item.text}}
</span>
</el-col>
</el-row>
</el-col>
</el-row>
</el-main>
<el-footer style="padding: 0">
<div style="background-image: url('imgs/wave.png');
height: 95px;margin-bottom: -30px"></div>
<div style="background-color: #3f3f3f;height: 100px;
font-size: 14px;color: #b1b1b1;
text-align: center;padding: 30px">
<p>Copyright © 北京达内金桥科技有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
<p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
<p>达内在线WWW.TMOOC.CN 专注于IT职业技能培训</p>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</el-footer>
</el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="js/vue.js"></script>
<!-- import JavaScript -->
<script src="js/eui.js"></script>
<script>
new Vue({
el: '#app',
data: function () {
return {
scanArr: [{
url: "imgs/ewm.jpg",
text: "扫码购买该商品"
},
{
url: "imgs/ewm.jpg",
text: "扫码关注公众号"
},
{
url: "imgs/ewm.jpg",
text: "扫码下载APP"
}
]
}
}
})
</script>
</html>
