提示：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框架，简单好用