header组件的实现图:
header组件的代码:
html:
<template> <div class="header"> <div class="content-wrapper"> <div class="avatar"> <img width="64" height="64" :src="sell.avatar"/> </div> <div class="content"> <div class="title"> <span class="brand"></span> <span class="name">{{sell.name}}</span> </div> <div class="description"> {{sell.description}}/{{sell.deliveryTime}}分钟送达 </div> <div v-if="sell.supports" class="support"><!--显示商家活动的第一个--> <span class="icon" :class="classMap[sell.supports[0].type]"></span> <span class="text">{{sell.supports[0].description}}</span> </div> </div> <div v-if="sell.supports" class="content-support" @click="showDetail"><!--显示商家活动的个数--> <span>{{sell.supports.length}}个 ></span> </div> </div> <div class="bulletin-wrapper" @click="showDetail"><!--公告的部分--> <span class="bulletin-title"></span> <span class="bulletin-text">{{sell.bulletin}}</span> <span class="im">></span> </div> <div class="background"><!--背景的模糊层--> <img width="100%" height="100%" :src="sell.avatar"/> </div> <div class="detail" v-show="detailShow"><!--隐藏层--> <div class="detail-wrapper clearFix"> <div class="detail-main"> <h1 class="name">{{sell.name}}</h1> <div class="star-wrapper"> <v-star :score="sell.score">{{sell.score}}</v-star><!--星级的组件--> </div> <div class="lineTitle"> <div class="line"></div> <div class="lineText">优惠信息</div> <div class="line"></div> </div> <ul v-if="sell.supports" class="detail-supports"><!--显示商家活动--> <li class="support-item" v-for="(item,index) in sell.supports"> <span class="icon" :class="classMap[sell.supports[index].type]"></span> <span class="text">{{sell.supports[index].description}}</span> </li> </ul> <div class="lineTitle"> <div class="line"></div> <div class="lineText">商家公告</div> <div class="line"></div> </div> <div class="seller-bulletion"> <p class="seller-text">{{sell.bulletin}}</p> </div> </div> </div> <div class="detail-close"><!--关闭按钮--> <div @click="closeDetail"> <Icon name="close"></Icon> </div> </div> </div> </div> </template>
js:
<script> import star from '../star/star' import Icon from "vue2-svg-icon/Icon"; export default { props: { sell: { type: Object } }, data() { return { detailShow: false } }, methods: { showDetail() { this.detailShow = true }, closeDetail() { this.detailShow = false } }, created() { this.classMap = ['decrease', 'discount', 'guarantee', 'invoice', 'special'] }, components: { "v-star": star, Icon } } </script>
css:
<style scoped> .header { position: relative; color: #fff; background: rgba(7, 17, 27, 0.5); } .content-wrapper { position: relative; padding: 24px 16px 18px 24px; font-size: 0px; } .avatar { display: inline-block; vertical-align: top; } .content { font-size: 14px; display: inline-block; margin-left: 16px; } .brand { display: inline-block; vertical-align: top; width: 60px; height: 36px; background-image: url("[email protected]"); } .name { display: inline-block; font-size: 25px; font-weight: bold; line-height: 32px; } .description { font-size: 20px; font-weight: 100; line-height: 20px; margin-top: 5px; } .support { margin-top: 5px; } .icon { display: inline-block; width: 24px; height: 24px; margin-left: 4px; vertical-align: top; } .text { font-size: 18px; } .decrease { background-image: url("[email protected]"); } .discount { background-image: url("[email protected]"); } .guarantee { background-image: url("[email protected]"); } .invoice { background-image: url("[email protected]"); } .special { background-image: url("[email protected]"); } .content-support { position: absolute; right: 12px; bottom: 18px; height: 24px; padding: 0 8px; background-color: rgba(0, 0, 0, 0.2); border-radius: 14px; text-align: center; line-height: 24px; vertical-align: top; } .content-support > span { font-size: 18px; } .bulletin-wrapper { height: 38px; line-height: 38px; padding: 0 12px 0 12px; white-space: nowrap; position: relative; overflow: hidden; text-overflow: ellipsis; background-color: rgba(0, 0, 0, 0.2); } .bulletin-title { display: inline-block; vertical-align: top; height: 24px; width: 44px; background-image: url("[email protected]"); margin-top: 8px; } .bulletin-text { vertical-align: top; text-align: center; font-size: 18px; } .im { position: absolute; right: 2px; top: 1px; font-size: 18px; } .background { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; filter: blur(10px); } .detail { position: fixed; z-index: 100; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(7, 17, 27, 0.9); } .clearFix { display: inline-block; } .clearFix :after { display: block; content: "."; height: 0; line-height: 0; clear: both; visibility: hidden; } .detail-wrapper { width: 100%; min-height: 100%; } .detail-main { width: 100%; margin-top: 64px; padding-bottom: 64px; } .detail-main > .name { width: 100%; line-height: 28px; font-size: 28px; font-weight: 700; text-align: center; } .detail-close { position: relative; margin: -50px auto 0 auto; text-align: center; clear: both; width: 30px; height: 30px; } .star-wrapper { margin-top: 20px; text-align: center; padding: 2px 0; } .lineTitle { display: flex; width: 80%; margin: 30px auto; } .line { flex: 1; position: relative; top: -6px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .lineText { font-size: 20px; font-weight: 700; padding: 0 12px; } .detail-supports { width: 80%; margin: 0 auto; } .support-item { padding: 0 12px; margin-bottom: 12px; font-size: 0; } .support-item > .text { line-height: 16px; font-size: 16px; } .seller-bulletion { width: 80%; margin: 0 auto; } .seller-bulletion > .seller-text { text-indent: 2em; width: 100%; padding: 0 12px; line-height: 24px; font-size: 20px; font-weight: 200; } </style>