<template>
|
<div class="evaluation-container">
|
<!-- 页面头部 -->
|
<div class="evaluation-header">
|
<h1>服务评价</h1>
|
<p>感谢您使用我们的非120急救医疗转运服务，请对本次服务进行评价！</p>
|
</div>
|
|
<!-- 车辆信息 -->
|
<div class="vehicle-info" v-if="vehicleNo">
|
<div class="info-item">
|
<span class="label">车牌号：</span>
|
<span class="value">{{ vehicleNo }}</span>
|
</div>
|
</div>
|
|
<!-- 评价表单 -->
|
<div class="evaluation-form">
|
<el-form ref="evaluationForm" :model="evaluationForm" :rules="rules" label-width="80px" size="small">
|
<!-- 客户信息 -->
|
<div class="form-section">
|
<h3>客户信息:</h3>
|
|
<!-- 微信授权信息显示 -->
|
<div v-if="evaluationForm.wechatOpenid" class="wechat-info">
|
<div class="wechat-user">
|
<img v-if="evaluationForm.wechatAvatar" :src="evaluationForm.wechatAvatar" class="wechat-avatar" />
|
<div class="wechat-details">
|
<div class="wechat-nickname">{{ evaluationForm.wechatNickname }}</div>
|
<div class="wechat-openid">已授权微信登录</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 微信授权按钮 -->
|
<div v-if="isWechatBrowser() && !evaluationForm.wechatOpenid" class="wechat-auth-section">
|
<el-button
|
type="primary"
|
size="small"
|
@click="redirectToWechatAuth"
|
icon="el-icon-user"
|
:loading="wechatAuthLoading"
|
>
|
{{ wechatAuthLoading ? '正在跳转...' : '微信一键登录' }}
|
</el-button>
|
<div class="wechat-tip">点击可自动获取您的微信信息</div>
|
</div>
|
|
<el-form-item label="称呼" prop="customerName">
|
<el-input v-model="evaluationForm.customerName" placeholder="请输入您的姓名" />
|
</el-form-item>
|
<el-form-item label="手机号" prop="customerPhone">
|
<el-input v-model="evaluationForm.customerPhone" placeholder="请输入您的手机号" />
|
<div v-if="evaluationForm.wechatOpenid" class="phone-tip">
|
|
</div>
|
</el-form-item>
|
</div>
|
|
<!-- 评价维度 -->
|
<div class="form-section">
|
<h3>服务评价</h3>
|
<div v-for="dimension in dimensions" :key="dimension.dimensionId" class="dimension-item">
|
<!-- 星级评价 - 标题和评分在同一行 -->
|
<div v-if="dimension.dimensionType === 'star'" class="star-rating-inline">
|
<div class="dimension-title-inline">
|
<span class="dimension-name-fixed">{{ dimension.dimensionName }}</span>
|
<span v-if="dimension.isRequired === '1'" class="required">*</span>
|
</div>
|
<div class="star-rating-content">
|
<el-rate
|
:value="getDimensionScore(dimension.dimensionId)"
|
:max="5"
|
@change="updateDimensionScore(dimension.dimensionId, $event)"
|
size="small"
|
:aria-label="`评价${dimension.dimensionName}`"
|
/>
|
</div>
|
</div>
|
|
<!-- 选择评价 -->
|
<div v-else-if="dimension.dimensionType === 'select'">
|
<div class="dimension-title">
|
<span>{{ dimension.dimensionName }}</span>
|
<span v-if="dimension.isRequired === '1'" class="required">*</span>
|
</div>
|
<div class="dimension-desc" v-if="dimension.dimensionDesc">
|
{{ dimension.dimensionDesc }}
|
</div>
|
<div class="select-rating">
|
<el-radio-group
|
v-model="selectedOptions[dimension.dimensionId]"
|
@change="(value) => handleOptionChange(dimension.dimensionId, value)"
|
size="small"
|
:aria-label="`选择${dimension.dimensionName}`">
|
<el-radio
|
v-for="option in getDimensionOptions(dimension)"
|
:key="option.value"
|
:label="option.value"
|
:aria-label="option.label">
|
{{ option.label }}
|
</el-radio>
|
</el-radio-group>
|
</div>
|
</div>
|
|
<!-- 文本评价 -->
|
<div v-else-if="dimension.dimensionType === 'text'">
|
<div class="dimension-title">
|
<span>{{ dimension.dimensionName }}</span>
|
<span v-if="dimension.isRequired === '1'" class="required">*</span>
|
</div>
|
<div class="dimension-desc" v-if="dimension.dimensionDesc">
|
{{ dimension.dimensionDesc }}
|
</div>
|
<div class="text-rating">
|
<el-input
|
:value="getDimensionText(dimension.dimensionId)"
|
type="textarea"
|
:rows="2"
|
placeholder="请输入您的意见或建议"
|
@input="updateDimensionText(dimension.dimensionId, $event)"
|
size="small"
|
:aria-label="`${dimension.dimensionName}评价意见`"
|
/>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
<!-- 提交按钮 -->
|
<div class="form-actions">
|
<el-button type="primary" size="large" @click="submitEvaluation" :loading="submitting">
|
提交评价
|
</el-button>
|
</div>
|
</el-form>
|
</div>
|
|
<!-- 结果页面 -->
|
<div v-if="showResult" class="result-page">
|
<div class="result-content">
|
<div class="result-icon">
|
<i class="el-icon-success" style="font-size: 60px; color: #67C23A;"></i>
|
</div>
|
<div class="result-message">
|
{{ resultMessage }}
|
</div>
|
<div class="result-actions">
|
<el-button type="primary" @click="resetForm">再次评价</el-button>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { getEvaluationDimensions, submitEvaluation, getWechatUserInfo, getWechatAuthUrl } from "@/api/evaluation";
|
|
export default {
|
name: "Evaluation",
|
data() {
|
return {
|
vehicleNo: '',
|
dimensions: [],
|
evaluationForm: {
|
vehicleNo: '',
|
customerName: '',
|
customerPhone: '',
|
wechatOpenid: '',
|
wechatNickname: '',
|
wechatAvatar: '',
|
wechatPhone: '',
|
evaluationDetails: []
|
},
|
// 用于存储选择类型的评价选项
|
selectedOptions: {},
|
rules: {
|
customerName: [
|
{ required: true, message: '请输入您的姓名', trigger: 'blur' }
|
],
|
customerPhone: [
|
{ required: true, message: '请输入您的手机号', trigger: 'blur' },
|
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
|
]
|
},
|
submitting: false,
|
showResult: false,
|
resultMessage: '',
|
wechatAuthLoading: false
|
};
|
},
|
created() {
|
this.initPage();
|
},
|
methods: {
|
// 初始化页面
|
async initPage() {
|
// 获取URL参数
|
this.vehicleNo = this.$route.query.vehicle || '';
|
this.evaluationForm.vehicleNo = this.vehicleNo;
|
|
// 检查是否在微信环境中
|
if (this.isWechatBrowser()) {
|
await this.handleWechatAuth();
|
}
|
|
// 加载评价维度
|
await this.loadDimensions();
|
},
|
|
// 判断是否为微信浏览器
|
isWechatBrowser() {
|
const ua = navigator.userAgent.toLowerCase();
|
return ua.indexOf('micromessenger') !== -1;
|
},
|
|
// 处理微信授权
|
async handleWechatAuth() {
|
const code = this.$route.query.code;
|
const state = this.$route.query.state;
|
|
if (code) {
|
// 有授权码，获取用户信息
|
try {
|
const response = await getWechatUserInfo(code);
|
if (response.code === 200) {
|
const userInfo = response.data;
|
this.evaluationForm.wechatOpenid = userInfo.openid;
|
this.evaluationForm.wechatNickname = userInfo.nickname;
|
this.evaluationForm.wechatAvatar = userInfo.headimgurl;
|
this.evaluationForm.wechatPhone = userInfo.phone || '';
|
|
// 如果获取到了微信昵称，自动填充到姓名字段
|
if (userInfo.nickname && !this.evaluationForm.customerName) {
|
this.evaluationForm.customerName = userInfo.nickname;
|
}
|
|
this.$message.success('微信授权成功，已自动获取您的信息');
|
} else {
|
this.$message.error(response.msg || '获取微信用户信息失败');
|
}
|
} catch (error) {
|
console.error('获取微信用户信息失败:', error);
|
this.$message.error('获取微信用户信息失败，请重试');
|
}
|
} else {
|
// 没有授权码，检查是否需要跳转到微信授权
|
const hasWechatInfo = this.evaluationForm.wechatOpenid;
|
if (!hasWechatInfo) {
|
await this.redirectToWechatAuth();
|
}
|
}
|
},
|
|
// 跳转到微信授权
|
async redirectToWechatAuth() {
|
this.wechatAuthLoading = true;
|
try {
|
// 构建当前页面的完整URL作为回调地址
|
const currentUrl = window.location.origin + window.location.pathname;
|
const params = new URLSearchParams(window.location.search);
|
params.delete('code'); // 移除可能存在的code参数
|
params.delete('state'); // 移除可能存在的state参数
|
const redirectUri = currentUrl + (params.toString() ? '?' + params.toString() : '');
|
|
console.log('准备生成微信授权URL，回调地址:', redirectUri);
|
|
const response = await getWechatAuthUrl(redirectUri, 'evaluation');
|
if (response.code === 200) {
|
console.log('微信授权URL生成成功:', response.data);
|
console.log('原始回调地址:', response.data.originalRedirectUri);
|
console.log('微信AppID:', response.data.appId);
|
|
// 跳转到微信授权页面
|
window.location.href = response.data.authUrl;
|
} else {
|
console.error('生成微信授权URL失败:', response.msg);
|
this.$message.error('微信授权服务暂时不可用，请手动填写信息');
|
}
|
} catch (error) {
|
console.error('跳转微信授权失败:', error);
|
this.$message.error('微信授权失败，请手动填写信息');
|
} finally {
|
this.wechatAuthLoading = false;
|
}
|
},
|
|
// 加载评价维度
|
async loadDimensions() {
|
try {
|
const response = await getEvaluationDimensions();
|
if (response.code === 200) {
|
this.dimensions = response.data;
|
}
|
} catch (error) {
|
console.error('加载评价维度失败:', error);
|
this.$message.error('加载评价维度失败');
|
}
|
},
|
|
// 获取维度评分
|
getDimensionScore(dimensionId) {
|
const detail = this.evaluationForm.evaluationDetails.find(d => d.dimensionId === dimensionId);
|
return detail ? detail.score : 0;
|
},
|
|
// 更新维度评分
|
updateDimensionScore(dimensionId, score) {
|
let detail = this.evaluationForm.evaluationDetails.find(d => d.dimensionId === dimensionId);
|
if (!detail) {
|
detail = { dimensionId, score: 0 };
|
this.evaluationForm.evaluationDetails.push(detail);
|
}
|
// 使用Vue.set确保响应式更新
|
this.$set(detail, 'score', score);
|
},
|
|
// 获取维度选项
|
getDimensionOption(dimensionId) {
|
const detail = this.evaluationForm.evaluationDetails.find(d => d.dimensionId === dimensionId);
|
return detail ? detail.optionValue : '';
|
},
|
|
// 获取维度选项值（用于v-model）
|
getDimensionOptionValue(dimensionId) {
|
const detail = this.evaluationForm.evaluationDetails.find(d => d.dimensionId === dimensionId);
|
if (!detail) {
|
// 如果不存在，创建一个新的detail对象
|
const newDetail = { dimensionId, optionValue: '' };
|
this.evaluationForm.evaluationDetails.push(newDetail);
|
return newDetail;
|
}
|
return detail;
|
},
|
|
// 获取维度选项的v-model对象
|
getDimensionOptionModel(dimensionId) {
|
const detail = this.evaluationForm.evaluationDetails.find(d => d.dimensionId === dimensionId);
|
if (!detail) {
|
const newDetail = { dimensionId, optionValue: '' };
|
this.evaluationForm.evaluationDetails.push(newDetail);
|
return newDetail;
|
}
|
return detail;
|
},
|
|
// 更新维度选项
|
updateDimensionOption(dimensionId, optionValue) {
|
let detail = this.evaluationForm.evaluationDetails.find(d => d.dimensionId === dimensionId);
|
if (!detail) {
|
detail = { dimensionId, optionValue: '' };
|
this.evaluationForm.evaluationDetails.push(detail);
|
}
|
// 使用Vue.set确保响应式更新
|
this.$set(detail, 'optionValue', optionValue);
|
},
|
|
// 处理选项变化
|
handleOptionChange(dimensionId, value) {
|
// 更新selectedOptions
|
this.$set(this.selectedOptions, dimensionId, value);
|
// 同时更新evaluationDetails
|
this.updateDimensionOption(dimensionId, value);
|
},
|
|
// 获取维度文本
|
getDimensionText(dimensionId) {
|
const detail = this.evaluationForm.evaluationDetails.find(d => d.dimensionId === dimensionId);
|
return detail ? detail.textContent : '';
|
},
|
|
// 更新维度文本
|
updateDimensionText(dimensionId, textContent) {
|
let detail = this.evaluationForm.evaluationDetails.find(d => d.dimensionId === dimensionId);
|
if (!detail) {
|
detail = { dimensionId, textContent: '' };
|
this.evaluationForm.evaluationDetails.push(detail);
|
}
|
// 使用Vue.set确保响应式更新
|
this.$set(detail, 'textContent', textContent);
|
},
|
|
// 获取维度选项配置
|
getDimensionOptions(dimension) {
|
if (!dimension.options) return [];
|
try {
|
return JSON.parse(dimension.options);
|
} catch (error) {
|
console.error('Error parsing options for', dimension.dimensionName, ':', error);
|
return [];
|
}
|
},
|
|
// 提交评价
|
async submitEvaluation() {
|
try {
|
// 表单验证
|
await this.$refs.evaluationForm.validate();
|
|
// 检查必填的评价维度
|
for (const dimension of this.dimensions) {
|
if (dimension.isRequired === '1') {
|
const detail = this.evaluationForm.evaluationDetails.find(d => d.dimensionId === dimension.dimensionId);
|
if (!detail || (dimension.dimensionType === 'star' && !detail.score) ||
|
(dimension.dimensionType === 'select' && !detail.optionValue) ||
|
(dimension.dimensionType === 'text' && !detail.textContent)) {
|
this.$message.error(`请完成${dimension.dimensionName}的评价`);
|
return;
|
}
|
}
|
}
|
|
this.submitting = true;
|
|
// 提交评价
|
const response = await submitEvaluation(this.evaluationForm);
|
if (response.code === 200) {
|
this.resultMessage = "感谢您的反馈，您的反馈将促使我们不断进步，我们将继续提供更好的服务";
|
this.showResult = true;
|
} else {
|
this.$message.error(response.msg || '提交失败，请重试');
|
}
|
} catch (error) {
|
console.error('提交评价失败:', error);
|
this.$message.error('提交失败，请重试');
|
} finally {
|
this.submitting = false;
|
}
|
},
|
|
// 重置表单
|
resetForm() {
|
this.showResult = false;
|
this.evaluationForm.customerName = '';
|
this.evaluationForm.customerPhone = '';
|
this.evaluationForm.evaluationDetails = [];
|
this.selectedOptions = {};
|
this.$refs.evaluationForm.resetFields();
|
}
|
}
|
};
|
</script>
|
|
<style scoped>
|
.evaluation-container {
|
max-width: 600px;
|
margin: 0 auto;
|
padding: 8px;
|
background-color: #f5f5f5;
|
min-height: 100vh;
|
}
|
|
.evaluation-header {
|
text-align: center;
|
margin-bottom: 12px;
|
padding: 12px;
|
background: white;
|
border-radius: 6px;
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
}
|
|
.evaluation-header h1 {
|
color: #333;
|
margin: 0 0 6px 0;
|
font-size: 20px;
|
}
|
|
.evaluation-header p {
|
color: #666;
|
margin: 0;
|
font-size: 14px;
|
}
|
|
.vehicle-info {
|
background: white;
|
padding: 8px 12px;
|
border-radius: 6px;
|
margin-bottom: 12px;
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
}
|
|
.info-item {
|
display: flex;
|
align-items: center;
|
}
|
|
.label {
|
font-weight: bold;
|
color: #333;
|
margin-right: 8px;
|
font-size: 14px;
|
}
|
|
.value {
|
color: #666;
|
font-size: 14px;
|
}
|
|
.evaluation-form {
|
background: white;
|
padding: 12px;
|
border-radius: 6px;
|
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
}
|
|
.form-section {
|
margin-bottom: 16px;
|
}
|
|
.form-section h3 {
|
color: #333;
|
margin: 0 0 12px 0;
|
padding-bottom: 6px;
|
border-bottom: 1px solid #409EFF;
|
font-size: 16px;
|
}
|
|
.dimension-item {
|
margin-bottom: 12px;
|
padding: 8px;
|
border: 1px solid #e4e7ed;
|
border-radius: 4px;
|
background-color: #fafafa;
|
}
|
|
.dimension-title {
|
font-weight: bold;
|
color: #333;
|
margin-bottom: 4px;
|
font-size: 14px;
|
}
|
|
.required {
|
color: #f56c6c;
|
margin-left: 3px;
|
}
|
|
.dimension-desc {
|
color: #666;
|
font-size: 12px;
|
margin-bottom: 8px;
|
}
|
|
/* 星级评价内联布局 */
|
.star-rating-inline {
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
gap: 8px;
|
}
|
|
.dimension-title-inline {
|
font-weight: bold;
|
color: #333;
|
font-size: 14px;
|
flex-shrink: 0;
|
}
|
|
.dimension-name-fixed {
|
display: inline-block;
|
width: 100px;
|
text-align: left;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
white-space: nowrap;
|
}
|
|
.star-rating-content {
|
flex: 1;
|
min-width: 200px;
|
}
|
|
.star-rating, .select-rating, .text-rating {
|
margin-top: 6px;
|
}
|
|
/* 优化星级评分显示 */
|
.star-rating .el-rate {
|
font-size: 18px;
|
}
|
|
.star-rating .el-rate__text {
|
font-size: 12px;
|
margin-left: 8px;
|
}
|
|
/* 优化选择评价显示 */
|
.select-rating .el-radio {
|
margin-right: 12px;
|
margin-bottom: 4px;
|
}
|
|
.select-rating .el-radio__label {
|
font-size: 13px;
|
}
|
|
/* 改善无障碍访问 */
|
.select-rating .el-radio__original {
|
position: absolute !important;
|
opacity: 0 !important;
|
width: 0 !important;
|
height: 0 !important;
|
margin: 0 !important;
|
padding: 0 !important;
|
border: none !important;
|
outline: none !important;
|
clip: rect(0, 0, 0, 0) !important;
|
-webkit-appearance: none !important;
|
-moz-appearance: none !important;
|
appearance: none !important;
|
}
|
|
.select-rating .el-radio__input {
|
position: relative;
|
white-space: nowrap;
|
vertical-align: middle;
|
outline: none;
|
line-height: 1;
|
}
|
|
.select-rating .el-radio__inner {
|
border: 1px solid #dcdfe6;
|
border-radius: 100%;
|
width: 14px;
|
height: 14px;
|
background-color: #fff;
|
position: relative;
|
cursor: pointer;
|
display: inline-block;
|
box-sizing: border-box;
|
transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46), background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
|
}
|
|
.select-rating .el-radio__inner:hover {
|
border-color: #409eff;
|
}
|
|
.select-rating .el-radio.is-checked .el-radio__inner {
|
border-color: #409eff;
|
background: #409eff;
|
}
|
|
.select-rating .el-radio.is-checked .el-radio__inner::after {
|
transform: translate(-50%, -50%) scale(1);
|
}
|
|
.select-rating .el-radio__inner::after {
|
width: 4px;
|
height: 4px;
|
border-radius: 100%;
|
background-color: #fff;
|
content: "";
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%) scale(0);
|
transition: transform 0.15s ease-in;
|
}
|
|
/* 优化文本评价显示 */
|
.text-rating .el-textarea__inner {
|
font-size: 13px;
|
min-height: 60px !important;
|
}
|
|
/* 微信授权相关样式 */
|
.wechat-info {
|
background: #f0f9ff;
|
border: 1px solid #b3d8ff;
|
border-radius: 6px;
|
padding: 12px;
|
margin-bottom: 16px;
|
}
|
|
.wechat-user {
|
display: flex;
|
align-items: center;
|
}
|
|
.wechat-avatar {
|
width: 40px;
|
height: 40px;
|
border-radius: 50%;
|
margin-right: 12px;
|
border: 2px solid #409EFF;
|
}
|
|
.wechat-details {
|
flex: 1;
|
}
|
|
.wechat-nickname {
|
font-weight: bold;
|
color: #333;
|
font-size: 14px;
|
margin-bottom: 4px;
|
}
|
|
.wechat-openid {
|
color: #666;
|
font-size: 12px;
|
}
|
|
.wechat-auth-section {
|
text-align: center;
|
padding: 16px;
|
background: #f8f9fa;
|
border-radius: 6px;
|
margin-bottom: 16px;
|
border: 1px dashed #ddd;
|
}
|
|
.wechat-tip {
|
color: #666;
|
font-size: 12px;
|
margin-top: 8px;
|
}
|
|
.phone-tip {
|
color: #909399;
|
font-size: 12px;
|
margin-top: 4px;
|
display: flex;
|
align-items: center;
|
}
|
|
.phone-tip i {
|
margin-right: 4px;
|
color: #409EFF;
|
}
|
|
/* 优化表单项间距 */
|
.el-form-item {
|
margin-bottom: 12px;
|
}
|
|
.el-form-item__label {
|
font-size: 13px;
|
line-height: 28px;
|
}
|
|
.el-input__inner {
|
font-size: 13px;
|
height: 32px;
|
line-height: 32px;
|
}
|
|
.form-actions {
|
text-align: center;
|
margin-top: 16px;
|
}
|
|
.form-actions .el-button {
|
padding: 10px 30px;
|
font-size: 14px;
|
}
|
|
.result-page {
|
position: fixed;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background: rgba(0,0,0,0.5);
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
z-index: 1000;
|
}
|
|
.result-content {
|
background: white;
|
padding: 30px;
|
border-radius: 8px;
|
text-align: center;
|
max-width: 350px;
|
width: 90%;
|
}
|
|
.result-icon {
|
margin-bottom: 16px;
|
}
|
|
.result-message {
|
font-size: 16px;
|
color: #333;
|
margin-bottom: 20px;
|
}
|
|
.result-actions {
|
text-align: center;
|
}
|
|
/* 移动端适配 */
|
@media (max-width: 768px) {
|
.evaluation-container {
|
padding: 6px;
|
}
|
|
.evaluation-header {
|
padding: 10px;
|
margin-bottom: 8px;
|
}
|
|
.evaluation-header h1 {
|
font-size: 18px;
|
}
|
|
.evaluation-header p {
|
font-size: 13px;
|
}
|
|
.evaluation-form {
|
padding: 10px;
|
}
|
|
.dimension-item {
|
padding: 6px;
|
margin-bottom: 8px;
|
}
|
|
.form-section {
|
margin-bottom: 12px;
|
}
|
|
.form-section h3 {
|
font-size: 15px;
|
margin-bottom: 8px;
|
}
|
|
.dimension-title {
|
font-size: 13px;
|
}
|
|
.dimension-desc {
|
font-size: 11px;
|
}
|
|
.star-rating .el-rate {
|
font-size: 16px;
|
}
|
|
/* 移动端星级评价内联布局 */
|
.star-rating-inline {
|
flex-direction: column;
|
align-items: flex-start;
|
gap: 6px;
|
}
|
|
.dimension-title-inline {
|
font-size: 13px;
|
}
|
|
.dimension-name-fixed {
|
width: 120px;
|
font-size: 13px;
|
}
|
|
.star-rating-content {
|
min-width: auto;
|
width: 100%;
|
}
|
|
.select-rating .el-radio {
|
margin-right: 8px;
|
}
|
|
.select-rating .el-radio__label {
|
font-size: 12px;
|
}
|
|
.text-rating .el-textarea__inner {
|
font-size: 12px;
|
min-height: 50px !important;
|
}
|
|
.el-form-item {
|
margin-bottom: 8px;
|
}
|
|
.el-form-item__label {
|
font-size: 12px;
|
line-height: 26px;
|
}
|
|
.el-input__inner {
|
font-size: 12px;
|
height: 30px;
|
line-height: 30px;
|
}
|
|
.form-actions {
|
margin-top: 12px;
|
}
|
|
.form-actions .el-button {
|
padding: 8px 24px;
|
font-size: 13px;
|
}
|
|
/* 移动端微信授权样式 */
|
.wechat-info {
|
padding: 10px;
|
margin-bottom: 12px;
|
}
|
|
.wechat-avatar {
|
width: 36px;
|
height: 36px;
|
margin-right: 10px;
|
}
|
|
.wechat-nickname {
|
font-size: 13px;
|
}
|
|
.wechat-openid {
|
font-size: 11px;
|
}
|
|
.wechat-auth-section {
|
padding: 12px;
|
margin-bottom: 12px;
|
}
|
|
.wechat-tip {
|
font-size: 11px;
|
margin-top: 6px;
|
}
|
|
.phone-tip {
|
font-size: 11px;
|
margin-top: 3px;
|
}
|
}
|
|
/* 超小屏幕适配 */
|
@media (max-width: 480px) {
|
.evaluation-container {
|
padding: 4px;
|
}
|
|
.evaluation-header {
|
padding: 8px;
|
}
|
|
.evaluation-form {
|
padding: 8px;
|
}
|
|
.dimension-item {
|
padding: 4px;
|
}
|
|
.star-rating .el-rate {
|
font-size: 14px;
|
}
|
|
.text-rating .el-textarea__inner {
|
min-height: 40px !important;
|
}
|
}
|
</style>
|
