From b6661a090e8bcf8f45be24a01b6a7bb08e3aaff1 Mon Sep 17 00:00:00 2001
From: Tomas <tomasysh@gmail.com>
Date: 星期三, 08 十二月 2021 08:50:04 +0800
Subject: [PATCH] refactor: pages component - separate vue files
---
PAMapp/pages/userReviews/index.vue | 171 +++-----------------------------------------------------
1 files changed, 10 insertions(+), 161 deletions(-)
diff --git a/PAMapp/pages/userReviews/index.vue b/PAMapp/pages/userReviews/index.vue
index 96b0cd9..92b8406 100644
--- a/PAMapp/pages/userReviews/index.vue
+++ b/PAMapp/pages/userReviews/index.vue
@@ -1,9 +1,9 @@
-<template>
+<template>
<div class="reviews-page">
<!-- 憿批恥��遛��漲蝯阡“��� -->
<div class="reviews-banner"></div>
- <section class="reviews-container">
+ <section class="reviews-container">
<section class="reviews-header">
<div class="reviews-header-container">
<div class="reviews-header-title">皛踵�漲隤踵</div>
@@ -20,17 +20,17 @@
<div class="card-txt">
撠憿批��
<span class="p">{{item.name}}</span>��擃���,�蝯虫�嗾憿���?
- <div
+ <div
class="card-score"
v-if="!isMobileDevice">
<el-rate class="user-reviews-rate" v-model="item.avgScore"></el-rate>
</div>
</div>
</div>
- <div
+ <div
class="card-score"
v-if="isMobileDevice">
- <el-rate
+ <el-rate
class="user-reviews-rate"
v-model="item.avgScore"></el-rate>
</div>
@@ -49,164 +49,13 @@
<el-button type="primary" class="reviews-dialog-btn" @click.native="reviewsDialogCheck">������</el-button>
</div>
</PopUpFrame>
-
+
</div>
</template>
-<script lang="ts">
-import { Vue,Component } from 'vue-property-decorator'
-import { isMobileDevice } from '~/assets/ts/device';
+<script src="./user-reviews.component.ts"></script>
-@Component({
- layout: 'home'
-})
-export default class UserReviews extends Vue{
-
- isMobileDevice = true;
-
- showReviews = false;
-
- reviewsList:ReviewsList[] = [
- {
- avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
- name:'�蝢��',
- avgScore: 0
- },
- {
- avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
- name:'鞈�',
- avgScore: 0
- },
- {
- avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
- name:'������',
- avgScore: 0
- }
- ];
-
- reviewsDialogCheck(): void {
- this.reviewsList = this.reviewsList.filter((reviewItem) => !reviewItem.avgScore);
- this.showReviews = false;
- };
-
- mounted() {
- this.isMobileDevice = isMobileDevice();
- };
-
- sendReviews() {
- this.showReviews = true;
- };
-}
-export interface ReviewsList{
- avatar:any;
- name:string;
- avgScore:number;
-}
-</script>
-<style lang="scss" scoped>
-.reviews-page{
- background-color: #F8F9FA;
- .reviews-banner{
- background-image: url('~/assets/images/satisfaction/banner_mob.svg');
- height: 120px;
- margin-bottom: 10px;
- }
- .reviews-container{
- padding-right: 10px;
- padding-left: 10px;
- padding-bottom: 10px;
- .reviews-header{
- margin-top: 10px;
- .reviews-header-container{
- display: flex;
- margin-bottom:38px;
- align-items: baseline;
- .reviews-header-title{
- margin-right: 17.5px;
- font-size: 20px;
- }
- .reviews-header-subTitle{
- font-size: 16px;
- color: #68737A;
- }
- }
- }
- .reviews-content{
- .reviews-content-card{
- .card-body{
- display: flex;
- .card-avatar{
- .img{
- height: 80px;
- width: 80px;
- }
- }
- .card-txt{
- font-size: 20px;
- padding-top: 20px;
- .p{
- font-size: 23px;
- color:#ED1B2E;
- font-weight: bold;
- }
- }
- }
- .card-score{
- margin-top: 10px;
- margin-bottom: 30px;
- display: flex;
- justify-content: center;
- }
- }
- }
- }
- .reviews-footer{
- height: 70px;
- display: flex;
- justify-content: center;
- margin-top: 45px;
- background-color: #fff;
- .reviews-footer-btn{
- width: 120px;
- height: 50px;
- margin-top: 10px;
- }
- }
- .reviews-dialog{
- display: flex;
- justify-content: center;
- margin-bottom: 56px;
- .reviews-dialog-title{
- font-size: 18px;
- }
- }
- .reviews-btn-block{
- display: flex;
- justify-content: center;
- }
-}
-
-@include desktop{
- .reviews-page{
- .reviews-banner{
- height: 147px;
- background-image: url('~/assets/images/satisfaction/banner_web.svg');
- }
- .reviews-container{
- width: 700px;
- margin: 30px auto 0px auto;
- .reviews-content{
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- }
- }
- .reviews-footer{
- background-color:#F8F9FA;
- }
- }
-
-}
-
-</style>
\ No newline at end of file
+<style lang="scss">
+ @import "./user-reviews.component.scss";
+</style>
--
Gitblit v1.8.0