vue项目(高仿”饿了吗”外卖App).docx
此项目为外卖App核心的商家模块的SPA,包括商品、评论、商家介绍、购物车等多个子模块,使用Vuejs全家桶+ES6+Webpack等前端最新最热的技术,采用模块化、组件化、工程化的模式开发; 显示/隐藏优惠和公告详情 <template> <div class="header"> <div class="content-wrapper"> <div class="avatar"> <img width="64" height="64"src="seller.avatar"> </div> <div class="content"> <div class="title"> <span class="brand"></span> <span class="name">{{seller.name}}</span> </div> <div class="description"> {{seller.description}}/{{seller.deliveryTime}}分钟到达 </div> <div class="support" v-if="seller.supports"> <span class="icon" :class="classMap[seller.supports[0].type]"></span> <span class="text">{{seller.supports[0].description}}</span> </div> </div> <div class="supports_count" v-if="seller.supports" @click="showDetail(true)"> <span class="count">{{seller.supports.length}}个</span> <span class="icon-keyboard_arrow_right"></span> </div> </div> <div class="bulletin-wrapper" @click="showDetail(true)"> <span class="bulletin-title"></span> <span class="bulletin-text">{{seller.bulletin}}</span> <i class="icon-keyboard_arrow_right"></i> </div> <div class="background"> <img width="100%" height="100%"src="seller.avatar"> </div> <div class="detail" v-show="detailShow"> <div class="detail-wrapper"> <div class="detail-main clearfix"> <div class="name">{{seller.name}}</div> <div class="star-wrapper">star组件内容</div> <div class="title"> <div class="line"></div> <div class="text">优惠信息</div> <div class="line"></div> </div> <ul class="supports" v-if="seller.supports"> <li class="support" v-for="item in seller.supports"> <span class="icon" :class="classMap[item.type]"></span> <span class="text">{{item.description}}</span> </li> </ul> <div class="title"> <div class="line"></div> <div class="text">商家公告</div> <div class="line"></div> </div> <div class="content"> <p>{{seller.bulletin}}</p> </div> </div> </div> <div class="detail-close" @click="showDetail(false)"> <span class="icon-close"></span> </div> </div> </div> </template> [removed] export default{ props: { seller: { type: Object } }, data () { return { detailShow: false } }, created () { this.classMap = ["decrease", "discount", "guarantee", "invoice", "special"] }, methods: { showDetail (isShow) { this.detailShow = isShow } } } [removed]
剩余63页未读,继续阅读
- 粉丝: 3
- 资源: 4
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- zigbee-cluster-library-specification
- JSBSim Reference Manual
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
评论0