评价详情页

src/views/enterprise/complaintEvaluate.vue

@@ -1,6 +1,56 @@
 <template>
-  <div>
+  <div class="address_edit">
-      aaaaa
+    <!-- 导航栏 -->
+    <!--<div class="header_body">
+      <header-nav :slefBack="true" @goBack="goBack" :titelText="`评价详情`"></header-nav>
+    </div>
+    -->
+    <!-- 中间 -->
+    <div class="warp_body">
+
+      <div class="cardsty"><label>处置单位</label><span>深圳市卫生健康委员会</span></div>
+      <div class="cardsty">
+        <h4>您对我们的服务满意吗？</h4>
+        <div class="eval-item"><label>处置速度</label><span class="eval-star"><van-icon class="active" name="star" /><van-icon class="active" name="star" /><van-icon class="active" name="star" /><van-icon class="active" name="star" /><van-icon class="active" name="star" /></span><span>非常满意</span></div>
+        <div class="eval-item"><label>处置效果</label><span class="eval-star"><van-icon name="star" /><van-icon name="star" /><van-icon name="star" /><van-icon name="star" /><van-icon name="star" /></span><span>非常满意</span></div>
+        <div class="eval-item"><label>服务体验</label><span class="eval-star"><van-icon name="star" /><van-icon name="star" /><van-icon name="star" /><van-icon name="star" /><van-icon name="star" /></span><span>非常满意</span></div>
+        <div class="eval-item"><label>反馈质量</label><span class="eval-star"><van-icon name="star" /><van-icon name="star" /><van-icon name="star" /><van-icon name="star" /><van-icon name="star" /></span><span>非常满意</span></div>
+
+        <div class="eval-all"><span>整体评价</span><i class="verygood"></i><span>满意</span></div>
+
+        </div>
+      <div class="cardsty">
+        <label>反馈详情</label>
+        <div class="eval-cont">
+
+        </div>
+      </div>
+
+      <div class="file-upload">
+        <div class="file-upload-center">
+          <label>附件</label>
+        </div>
+        <!--          <van-uploader v-model="submitData.fileListObj"  class="file" :after-read="uploadFiles" multiple :max-size="500 * 1024" @oversize="onOversize" :before-delete="deleteFile">-->
+        <!--            <template #preview-cover="{ file }">-->
+        <!--              <div class="preview-cover van-ellipsis">{{ file.name }}</div>-->
+        <!--            </template>-->
+        <!--          </van-uploader>-->
+        <!-- <van-uploader v-model="submitData.fileListObj" max-count="9" class="file" multiple
+                      :after-read="uploadFiles" :before-delete="deleteFile">
+            <template #preview-cover="{ file }">
+                <div class="preview-cover van-ellipsis">{{ file.name }}</div>
+            </template>
+        </van-uploader> -->
+        <van-uploader v-model="submitData.fileListObj" class="file" multiple max-count="9"
+                      :after-read="uploadFiles" :before-delete="deleteFile">
+          <template #preview-cover="{ file }">
+            <div class="preview-cover van-ellipsis">{{ file.name }}</div>
+          </template>
+        </van-uploader>
+
+      </div>
+
+    </div>
   </div>
 </template>
 
@@ -31,5 +81,226 @@
 </script>
 
 <style lang="less" scoped>
+.address_edit {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+  background-color: #ebf3fb;
+}
+
+.warp_body {
+  margin: 2% 3%;
+  padding-bottom: 3rem;
+  width: 94%;
+  height: 100%;
+  //border-radius: 0.25rem;
+  //background-image: linear-gradient(to bottom, #ebf3fb, #fff);
+  background: transparent;
+  overflow-y: auto;
+}
+
+.file-upload {
+  position: relative;
+  min-height: 3.0rem;
+  max-height: 6.5rem;
+  padding: 1rem 0.27rem 0.27rem 0.43rem;
+  box-sizing: border-box;
+  background: #fff;
+  border-radius: 0.2rem;
+}
+
+.file-upload-center {
+  position: absolute;
+  top: 0.27rem;
+  left: 0.43rem;
+  width: 90%;
+  height: 0.65rem;
+  font-size: 0.38rem;
+  font-weight: 600;
+  span {
+    font-size: 0.32rem;
+    color: rgb(221, 229, 227);
+  }
+}
+.file {
+  position: relative;
+  width: 100%;
+  height: calc(100% - 1.5rem);
+}
+
+/deep/ .van-uploader__upload, /deep/ .van-uploader__preview-image {
+  width: 1.95rem !important;
+}
+
+.preview-cover {
+  position: absolute;
+  bottom: 0;
+  box-sizing: border-box;
+  width: 100%;
+  padding: 4px;
+  color: #fff;
+  font-size: 0.32rem;
+  text-align: center;
+  background: rgba(0, 0, 0, 0.3);
+}
+
+.zoom {
+  /*margin-top: 0.65rem;
+  padding-top: 0.27rem;
+  padding-left: 0.27rem;*/
+  img {
+    width: 1.95rem;
+    height: 2rem;
+    margin: 0 0.21rem 0.21rem 0;
+    font-size: 0.35rem;
+  }
+}
+
+.btnbox {
+  display: flex;
+  justify-content: center;
+  margin: 5% 2%;
+  width: 96%;
+  height: 1.0rem;
+}
+
+.btn-reset,
+.btn-search {
+  display: inline-block;
+  margin: 0 2%;
+  padding: 0;
+  width: 60%;
+  color: #fff;
+  font-size: 0.35rem;
+  border-radius: 1rem;
+  background: #1367fe;
+  border: 1px solid #1367fe;
+  text-align: center;
+}
+
+.btn-reset {
+  width: 35%;
+  background-color: #fff;
+  border-color: rgba(19, 103, 254, .7);
+  color: #1367fe;
+}
+
+.search-result {
+  width: 100%;
+  padding-bottom: 2rem;
+}
+
+.case-item {
+  margin: 3% 2%;
+  padding: 2% 0;
+  width: 96%;
+  font-size: 0.35rem;
+  border-bottom: 1px solid #f4f4f4;
+  color: #999;
+  line-height: 2;
+}
+
+.case-title {
+  margin: 2% 0;
+  font-size: 0.42rem;
+  color: #333;
+  line-height: 1.25;
+}
+
+/deep/ .van-button {
+  margin: 5% 3%;
+  padding: 0;
+  width: 94%;
+  height: 1rem;
+  color: #fff;
+  font-size: 0.4rem;
+  border-radius: 1rem;
+  background: #1367fe;
+  border: 0.01rem solid #1367fe;
+  text-align: center;
+}
+
+/deep/ .van-action-bar {
+  box-shadow: 0 0 0.27rem #e5e5e5;
+}
+
+.cardsty {
+  margin: 3% 0;
+  width: 100%;
+  padding: 5%;
+  background: #fff;
+  border-radius: 0.2rem;
+  font-size: 0.38rem;
+  box-sizing: border-box;
+}
+
+.cardsty h4 {
+  margin: 0.2rem 0 0.5rem;
+  font-size: 0.45rem;
+}
+
+.cardsty label {
+  margin-right: 0.3rem;
+  font-weight: 600;
+}
+
+.eval-item {
+  display: flex;
+  align-items: center;
+  margin: 0.27rem 0;
+}
+
+.eval-star {
+  margin-right: 0.3rem;
+}
+
+.eval-star i {
+  margin: 0 0.1rem;
+  color: #ddd;
+  font-size: 0.5rem;
+}
+
+.eval-star i.active {
+  color: #fbb516;
+}
+
+.eval-all {
+  display: flex;
+  align-items: center;
+  margin: 8% 2% 3%;
+  padding: 8% 0 0 0;
+  width: 96%;
+  border-top: 0.02667rem solid #eee;
+}
+
+.eval-all i {
+  display: inline-block;
+  margin: 0 0.3rem 0 0.5rem;
+  width: 0.75rem;
+  height: 0.75rem;
+  background: url("../../assets/images/eval-verygood.png") no-repeat;
+  background-size: cover;
+}
+
+.eval-all i.good {
+  background: url("../../assets/images/eval-good.png") no-repeat;
+  background-size: cover;
+}
+
+.eval-all i.bad {
+  background: url("../../assets/images/eval-bad.png") no-repeat;
+  background-size: cover;
+}
+.eval-cont {
+  margin: 3% 0;
+  padding: 0.27rem;
+  width: 100%;
+  min-height: 3rem;
+  border-radius: 0.2rem;
+  border: 0.02667rem solid #eee;
+  box-sizing: border-box;
+  line-height: 1.5;
+}
 
 </style>