提示：Vue属于前端框架

前言

提示：这里可以添加本文要记录的大概内容：

.Vue.js是用于构建交互式的 Web 界面的库。

2.它提供了 MVVM数据绑定和一个可组合的组件系统,具有简单、灵活的API。从技术上讲，Vue.js集中在MVVM模式上的视图模型层,并通过双向数据绑定连接视图和模型。

3.实际的DOM操作和输出格式被抽象出来成指令和过滤器。相比其它的MVVM 框架,Vue.js 更容易上手。

一、需要制作的效果

二、详情介绍

1.构造思路

基于移动端制作，按照从上往下的构造思路来，首先制作第一部分也就是如下图的部分；

这个代码如下，首先是前端html内容

<div class="author"><div class="item3"><i class="el-icon-back"></i></div><div class="item2"><i class="el-icon-edit-outline"></i></div>
</div>

然后是css内容

.author {display: flex;font-size: 14px;margin-top: 20px;/* margin-bottom: 20px; */padding-bottom: 10px;
}.item2 {width: 500px;text-align: right;font-size: 25px;
}.item3 {font-size: 25px;
}

2.下面制作右边图片标题以及价格等等

这一块效果图

代码如下（示例 html 部分）：

<div class="author"><div><img src="https://cdn3.axureshop.com/demo/1564251/images/%E6%BC%94%E5%87%BA%E8%AF%A6%E6%83%85/%E5%B0%81%E9%9D%A2_u3291.png"/></div><div><p><span>舞台剧【涛涛与野兽】大战三百回合</span></p><p class="pd">舞台剧</p><p><b>￥990.0 - ￥1990.0</b></p><p class="pd">2202.09.14-2202.09.30</p></div></div>

css代码样式：

.author {display: flex;font-size: 14px;margin-top: 20px;/* margin-bottom: 20px; */padding-bottom: 10px;
}
.pd {color: darkgrey;font-size: 10px;
}

3.名称地址购物券

效果演示

代码如下（示例 html 部分）：

<div><div>上海市1324郑州有限公司</div></div><div class="author"><div><p class="pd">冰江大道2223号</p></div><div class="item2"><i class="el-icon-location"></i></div></div><div class="qaun"><div><div class="qaun1">新人红包</div><div class="qaun2">￥10</div></div><div class="qaun3">满999可用</div><div class="qaun4">2202.09.14-2202.09.21</div><div class="qaun5"><el-button type="danger" round>立即领取</el-button></div></div>

css代码样式：

.author {display: flex;font-size: 14px;margin-top: 20px;/* margin-bottom: 20px; */padding-bottom: 10px;
}.qaun{width: 340px;height: 70px;background-color: rgb(231, 72, 117);border-radius: 10px;margin : 0 auto;
}.qaun1{width: 70px;background-color: rgb(243, 202, 38);border-radius: 5px;color: rgb(255, 255, 255);position: absolute;top: 402px;
}.qaun2{width: 70px;border-radius: 5px;color: rgb(255, 255, 255);position: absolute;top: 428px;right: 280px;}.qaun3{width: 100px;color: rgb(255, 255, 255);position: absolute;top: 400px;right: 180px;
}.qaun4{width: 200px;color: rgb(255, 255, 255);position: absolute;top: 430px;right: 80px;font-size: 10px;
}.qaun5{width: 200px;color: rgb(255, 255, 255);position: absolute;top: 410px;right: -60px;font-size: 10px;
}

3.名称地址购物券

效果演示

代码如下（示例 html 部分）：

<div class="deng">演出简介</div><div class="deng1"><p>dasdasdsadasffdsfsdfdsgadsdas</p></div><div class="xing"><i class="el-icon-star-off"></i></div><div class="xing1"><i class="el-icon-service"></i></div><div class="xing2"><el-button type="danger" style="width:250px">立即购买</el-button></div></div>

css代码样式：

.author {display: flex;font-size: 14px;margin-top: 20px;/* margin-bottom: 20px; */padding-bottom: 10px;
}.deng{position: absolute;top: 500px;right: 300px;font-size: 20px;
}
.deng1{position: absolute;top: 520px;right: 140px;font-size: 15px;
}.xing{position: absolute;top: 580px;right: 340px;font-size: 30px;
}
.xing1{position: absolute;top: 580px;right: 294px;font-size: 30px;
}.xing2{width: 150px;position: absolute;top: 570px;right: 120px;font-size: 30px;
}

总结

提示：这里对文章进行总结：
例如：以上就是vue基本的样式结构，vue框架，简单好用

Vue前端购物详情页面相关推荐

前端Vue项目——课程详情页面实现
一.详情页面路由跳转应用 Vue Router 编程式导航通过 this.$router.push() 来实现路由跳转. 1.绑定查看详情事件修改 src/components/Course/Co ...
vue实现动态详情页面
像上述的详情页面,可能每个字段都会在页面写死,这样会影响页面结构,代码可读性较差,可维护性也不好,冗余的结构和样式代码也会大大增加. 因此这些详情页面,应该通过动态遍历来实现: 父组件 <tem ...
vue 前端进行tab页面切换时，要求不刷新
项目中TagsView组件用于tab页面切换,在项目中已使用keep-alive,目标页面也开启了"缓存"标志,但是在tab标签点击切换时,有几个页面数据还是刷新了.查找了相关资料 ...
若依 vue前端动态设置路由path不同参数在页面容器里打开新页面（新路由），面包屑和标签页标题根据参数动态改变，面包屑多级标题，侧边栏对应菜单亮起
前言因为是在vue源码的基础上进行修改,所以,就没有复制代码在文章上,采取的是截图对比源码和我修改的代码片段.要麻烦你们自己手敲了. 先来看看效果: 场景:在费用配置列表中,点击每一项的配置,都会在 ...
前端app调起摄像头只显示在页面_猫也能看得懂的教程之一分钟使用Vue搭建简单Web页面...
本教程适合人群: 已经了解过过html.js.css,想深入学习前端技术的小伙伴有前端开发经验.但是没有使用过Vue的小伙伴有过其他编程经验,对前端开发感兴趣的小伙伴学习本教程之后你将会: 了解 ...
vue 一个页面多个router-view如何配置子路由_浅谈vue前端开发架构
通常我们开发出来的网页大都是通过.html文件,渲染与浏览器,也就是UI呈现给用户的. 一个UI page,一般会涉及到资源文件,样式排版,UI交互: 多个UI page,就涉及到UI交互响应: 那么 ...
vue项目keepAlive保持页面状态（详情页返回列表页不刷新）
vue项目keepAlive保持页面状态(详情页返回列表页不刷新) 在vue项目中,存在从列表页跳转到详情页查看,而后又返回列表页的操作时,如果列表过长,我们往往希望从详情页返回列表页时,列表页能留在 ...
2021-12-05 vue移动端卖座电影项目(六) 为详情页面Detail.vue获取后台数据并设置样式
1.带着id传到详情页面中效果:点击任一电影,跳转进Detail.vue页面时后面自动拼接上电影的filmId http://localhost:8081/#/Detail/6112 http:// ...
实战SSM_O2O商铺_43【前端展示】店铺详情页面从后端到前端的实现
文章目录概述 Dao层 Service层 Controller层 View层 shopdetail.html shopdetail.js shopdetail.css 联调商品详情待开发 Gith ...

Vue前端购物详情页面

前言

一、需要制作的效果

二、详情介绍

1.构造思路

2.下面制作右边图片标题以及价格等等

3.名称地址购物券

3.名称地址购物券

总结

Vue前端购物详情页面相关推荐

最新文章

热门文章