<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>评价</title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
<link rel="stylesheet" href="css/evaluate.css">
<script src="js/flexible.debug.js"></script>
<script src="js/flexible_css.debug.js"></script>
<script src="js/vue.js"></script>
<script src="js/swiper.min.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/exif.js"></script>
</head>
<body>
<div class="app">
<div class="tit">
<div class="titL fl">
<img src="img/img3.jpg">
</div>
<div class="titR fl">
<p>
湖南大枣湖南大枣湖南大枣湖南大枣湖南大枣湖南大枣湖南大枣
湖南大枣湖南大枣湖南大枣湖南大枣湖南大枣湖南大枣湖南大枣
</p>
</div>
</div>
<div class="ping">
<p class="p_tit">请填写您的评价内容</p>
<div class="ly ly2">
<textarea name="" ></html>
CSS文件
.tit {
width: 100%;
height: 2.66667rem;
padding: 0.32rem 0 0.32rem 0.32rem;
background: #ffffff; }
.tit .titL {
width: 2.13333rem;
height: 1.86667rem; }
.tit .titL img {
display: block;
width: 100%;
height: 100%; }
.tit .titR {
width: 7.52rem;
height: 1.86667rem;
padding-top: 0.26667rem;
padding-left: 0.26667rem; }
.tit .titR p {
width: 6.82667rem;
height: 0.93333rem;
font-size: 0.37333rem;
line-height: 0.48rem;
color: #4c4c4c;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical; }
.ping p.p_tit {
width: 100%;
height: 1.06667rem;
padding: 0.48rem 0 0.24rem 0.32rem;
font-size: 0.37333rem;
color: #4c4c4c;
background: #f5f5f5; }
.ping .ly {
font-size: 0.37333rem;
color: #4c4c4c;
padding: 0.42667rem 0.32rem 0 0.32rem;
background: #ffffff;
position: relative; }
.ping .ly textarea {
border: none;
width: 100%;
height: 4.8rem;
background: #ffffff;
font-size: 0.37333rem;
color: #4c4c4c; }
.ping .ly textarea ::-webkit-textarea-placeholder {
color: #999999; }
.ping .ly span {
font-size: 0.32rem;
color: #999999;
position: absolute;
right: 0.32rem;
bottom: 0.4rem; }
.ping .img_group {
width: 100%;
background: #ffffff;
padding: 0.4rem 0.32rem;
border-top: 1px solid #ededed; }
.ping .img_group p {
font-size: 0.37333rem;
color: #4c4c4c;
margin-bottom: 0.48rem; }
.ping .img_group .img_list {
width: 100%;
height: 2rem;
max-height: 4rem;
background: #ffffff; }
.ping .img_group .img_list .img_item {
display: block;
float: left;
border-radius: 0.10667rem;
width: 2rem;
height: 2rem;
margin-right: 0.34667rem;
position: relative; }
.ping .img_group .img_list .img_item img {
display: block;
border-radius: 0.10667rem;
width: 100%;
height: 100%; }
.ping .img_group .img_list .img_item i {
background: url("../img/de_ete.png") no-repeat;
background-size: 100%;
display: block;
width: 0.64rem;
height: 0.64rem;
position: absolute;
right: -0.18667rem;
top: -0.21333rem; }
.ping .img_group .img_list .img_item:nth-of-type(4) {
margin-right: 0; }
.ping .img_group .img_list .img_item:nth-of-type(5), .ping .img_group .img_list .img_item:nth-of-type(6), .ping .img_group .img_list .img_item:nth-of-type(7) {
margin-top: 0.42667rem;
margin-bottom: 0.4rem; }
.ping .btn_div {
clear: both;
width: 100%;
height: 2.64rem;
background: #f5f5f5;
padding-top: 0.66667rem; }
.ping .btn_div button {
display: block;
width: 9.4rem;
height: 1.28rem;
line-height: 1.28rem;
text-align: center;
color: #ffffff;
margin: 0 auto;
border: none; }
.ping .btn_div button.btn {
background: #cccccc; }
.ping .btn_div button.btn_submit {
background: #f02e34; }
.mo {
position: fixed;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5); }
.fot {
position: fixed;
width: 100%;
height: 4.10667rem;
bottom: 0.13333rem; }
.fot .fot_item {
display: block;
width: 100%;
height: 1.28rem;
line-height: 1.28rem;
text-align: center;
font-size: 0.42667rem;
color: #4c4c4c;
position: relative; }
.fot .fot_item button {
display: block;
width: 9.09333rem;
height: 100%;
background: #ffffff;
position: absolute;
left: 50%;
margin-left: -4.54667rem;
border: none; }
.fot .fot_item input {
display: block;
width: 2.21333rem;
height: 0.72rem;
position: absolute;
z-index: 100;
left: 50%;
top: 50%;
margin-left: -1.10667rem;
margin-top: -0.36rem;
opacity: 0; }
.fot button.a {
border-radius: 0.13333rem 0.13333rem 0 0;
border-bottom: 1px solid #ededed; }
.fot button.b {
border-radius: 0 0 0.13333rem 0.13333rem; }
.fot button.c {
margin-top: 0.13333rem;
border-radius: 0.13333rem; }
.success {
position: fixed;
top: 50%;
left: 50%;
text-align: center;
background: rgba(0, 0, 0, 0.6);
font-size: 0.37333rem;
color: #ffffff;
border-radius: 0.13333rem;
width: 2.88rem;
height: 1.2rem;
line-height: 1.2rem;
margin-top: -0.6rem;
margin-left: -1.44rem; }