Vue前端购物详情页面

提示：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">舞台剧