|
|
|
@ -1,85 +1,60 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<view class="container">
|
|
|
|
<view class="container">
|
|
|
|
<!-- 顶部图片和标题 -->
|
|
|
|
<!-- 顶部图片和标题 -->
|
|
|
|
<view class="header-section">
|
|
|
|
<view class="header-section">
|
|
|
|
<image
|
|
|
|
<image class="header-image" src="/static/imgs/indexImg.png" mode="aspectFill"></image>
|
|
|
|
class="header-image"
|
|
|
|
<view class="header-overlay">
|
|
|
|
src="/static/imgs/indexImg.png"
|
|
|
|
<view class="header-title">生成电梯图纸</view>
|
|
|
|
mode="aspectFill"
|
|
|
|
<view class="header-subtitle">
|
|
|
|
></image>
|
|
|
|
选择模板并设置参数，快速生成专业电梯施工图
|
|
|
|
<view class="header-overlay">
|
|
|
|
</view>
|
|
|
|
<view class="header-title">生成电梯图纸</view>
|
|
|
|
</view>
|
|
|
|
<view class="header-subtitle">
|
|
|
|
</view>
|
|
|
|
选择模板并设置参数，快速生成专业电梯施工图
|
|
|
|
|
|
|
|
</view>
|
|
|
|
<!-- 选择图纸模板 -->
|
|
|
|
</view>
|
|
|
|
<view class="section">
|
|
|
|
</view>
|
|
|
|
<view class="section-title">选择图纸模板</view>
|
|
|
|
|
|
|
|
<uv-skeletons v-if="loading" :loading="loading" :skeleton="[{
|
|
|
|
<!-- 选择图纸模板 -->
|
|
|
|
type: 'flex',
|
|
|
|
<view class="section">
|
|
|
|
num: 2,
|
|
|
|
<view class="section-title">选择图纸模板</view>
|
|
|
|
gap: '20rpx',
|
|
|
|
<view class="template-grid">
|
|
|
|
children:[{
|
|
|
|
<view
|
|
|
|
type: 'custom',
|
|
|
|
class="template-item"
|
|
|
|
num: 1,
|
|
|
|
:class="{ active: selectedTemplate === 'passenger' }"
|
|
|
|
gap: '20rpx',
|
|
|
|
@click="selectTemplate('passenger')"
|
|
|
|
style: 'width: 300rpx;height:200rpx;marginLeft: 10rpx;'
|
|
|
|
>
|
|
|
|
},{
|
|
|
|
<u-icon name="edit-pen" color="#4285f4" size="24"></u-icon>
|
|
|
|
type: 'custom',
|
|
|
|
<view class="template-name">乘客电梯标准图纸</view>
|
|
|
|
num: 1,
|
|
|
|
<view class="template-desc">适用于住宅、商业建筑</view>
|
|
|
|
gap: '20rpx',
|
|
|
|
</view>
|
|
|
|
style: 'width: 300rpx;height:200rpx;marginLeft: 10rpx;'
|
|
|
|
<view
|
|
|
|
}]
|
|
|
|
class="template-item"
|
|
|
|
}]"></uv-skeletons>
|
|
|
|
:class="{ active: selectedTemplate === 'freight' }"
|
|
|
|
<view class="template-grid" v-else>
|
|
|
|
@click="selectTemplate('freight')"
|
|
|
|
<view class="template-item" :class="{ active: currentTemplate.id === item.id }"
|
|
|
|
>
|
|
|
|
@click="selectTemplate(item)" v-for="item in templateList" :key="item.id">
|
|
|
|
<u-icon name="car" color="#4285f4" size="24"></u-icon>
|
|
|
|
<view class="template-name">{{item.name}}</view>
|
|
|
|
<view class="template-name">货运电梯专用图纸</view>
|
|
|
|
<view class="template-desc">{{item.description}}</view>
|
|
|
|
<view class="template-desc">适用于仓库、工厂</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<view
|
|
|
|
</view>
|
|
|
|
class="template-item"
|
|
|
|
|
|
|
|
:class="{ active: selectedTemplate === 'medical' }"
|
|
|
|
<!-- 设置参数 -->
|
|
|
|
@click="selectTemplate('medical')"
|
|
|
|
<view class="section">
|
|
|
|
>
|
|
|
|
<view class="section-title">设置参数</view>
|
|
|
|
<u-icon name="plus-circle" color="#4285f4" size="24"></u-icon>
|
|
|
|
<uv-skeletons v-if="loading" :loading="loading" :skeleton="[{
|
|
|
|
<view class="template-name">医用电梯专业图纸</view>
|
|
|
|
type: 'line',
|
|
|
|
<view class="template-desc">适用于医院、医疗场所</view>
|
|
|
|
num: 3,
|
|
|
|
</view>
|
|
|
|
gap: '20rpx'
|
|
|
|
<view
|
|
|
|
}]"></uv-skeletons>
|
|
|
|
class="template-item"
|
|
|
|
<view class="form" v-else>
|
|
|
|
:class="{ active: selectedTemplate === 'sightseeing' }"
|
|
|
|
<uv-form labelAlign="left" labelWidth="auto" labelPosition="left" :model="formField" :rules="rules"
|
|
|
|
@click="selectTemplate('sightseeing')"
|
|
|
|
ref="form">
|
|
|
|
>
|
|
|
|
<uv-form-item :prop="item.key" :label="item.name + '：'" v-for="item in currentTemplate.params">
|
|
|
|
<u-icon name="eye" color="#4285f4" size="24"></u-icon>
|
|
|
|
<uv-input :type="item.type === 'number' ? 'digit' : 'text'" v-model="item.value" color="#000"
|
|
|
|
<view class="template-name">观光电梯定制图纸</view>
|
|
|
|
border="bottom" :placeholderStyle="{ color: '#666778' }" placeholder="请输入"></uv-input>
|
|
|
|
<view class="template-desc">适用于商场、酒店</view>
|
|
|
|
</uv-form-item>
|
|
|
|
</view>
|
|
|
|
<!-- <uv-form-item prop="password" label="载重（kg）">
|
|
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 设置参数 -->
|
|
|
|
|
|
|
|
<view class="section">
|
|
|
|
|
|
|
|
<view class="section-title">设置参数</view>
|
|
|
|
|
|
|
|
<view class="form">
|
|
|
|
|
|
|
|
<uv-form
|
|
|
|
|
|
|
|
labelAlign="left"
|
|
|
|
|
|
|
|
labelWidth="auto"
|
|
|
|
|
|
|
|
labelPosition="left"
|
|
|
|
|
|
|
|
:model="formField"
|
|
|
|
|
|
|
|
:rules="rules"
|
|
|
|
|
|
|
|
ref="form"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
<uv-form-item prop="phone" label="电梯类型">
|
|
|
|
|
|
|
|
<uv-input
|
|
|
|
|
|
|
|
v-model="formField.phone"
|
|
|
|
|
|
|
|
color="#000"
|
|
|
|
|
|
|
|
border="none"
|
|
|
|
|
|
|
|
:placeholderStyle="{ color: '#666778' }"
|
|
|
|
|
|
|
|
placeholder="请输入"
|
|
|
|
|
|
|
|
></uv-input>
|
|
|
|
|
|
|
|
</uv-form-item>
|
|
|
|
|
|
|
|
<uv-form-item prop="password" label="载重（kg）">
|
|
|
|
|
|
|
|
<uv-input
|
|
|
|
<uv-input
|
|
|
|
v-model="formField.password"
|
|
|
|
v-model="formField.password"
|
|
|
|
color="#000"
|
|
|
|
color="#000"
|
|
|
|
@ -134,266 +109,265 @@
|
|
|
|
v-model="formField.password"
|
|
|
|
v-model="formField.password"
|
|
|
|
placeholder="请输入"
|
|
|
|
placeholder="请输入"
|
|
|
|
></uv-textarea>
|
|
|
|
></uv-textarea>
|
|
|
|
</uv-form-item>
|
|
|
|
</uv-form-item> -->
|
|
|
|
</uv-form>
|
|
|
|
</uv-form>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 底部按钮 -->
|
|
|
|
<!-- 底部按钮 -->
|
|
|
|
<view class="bottom-actions">
|
|
|
|
<view class="bottom-actions">
|
|
|
|
<uv-button
|
|
|
|
<uv-button :loading="generating" @click="() => modalRef.open()" text="生成图纸" color="#3F70FF"></uv-button>
|
|
|
|
:loading="generating"
|
|
|
|
<uv-button @click="viewHistory" text="查看记录"></uv-button>
|
|
|
|
@click="viewHistory"
|
|
|
|
</view>
|
|
|
|
text="生成图纸"
|
|
|
|
<uv-modal ref="modalRef" showCancelButton content='确定生成图纸？' @confirm="confirmGenerate"></uv-modal>
|
|
|
|
color="#3F70FF"
|
|
|
|
</view>
|
|
|
|
></uv-button>
|
|
|
|
|
|
|
|
<uv-button @click="viewHistory" text="查看记录"></uv-button>
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script setup>
|
|
|
|
<script setup>
|
|
|
|
import { ref, onMounted } from "vue";
|
|
|
|
import {
|
|
|
|
import {
|
|
|
|
ref,
|
|
|
|
onShow,
|
|
|
|
onMounted
|
|
|
|
onLoad,
|
|
|
|
} from "vue";
|
|
|
|
onShareAppMessage,
|
|
|
|
import {
|
|
|
|
onShareTimeline,
|
|
|
|
onShow,
|
|
|
|
onReachBottom,
|
|
|
|
onLoad,
|
|
|
|
} from "@dcloudio/uni-app";
|
|
|
|
onShareAppMessage,
|
|
|
|
import { useAuthStore, useUserStore } from "@/store";
|
|
|
|
onShareTimeline,
|
|
|
|
import RPC from "@/utils/request";
|
|
|
|
onReachBottom,
|
|
|
|
import { usePermission } from "@/hooks/usePermission";
|
|
|
|
} from "@dcloudio/uni-app";
|
|
|
|
|
|
|
|
import {
|
|
|
|
const authStore = useAuthStore();
|
|
|
|
useAuthStore,
|
|
|
|
const userStore = useUserStore();
|
|
|
|
useUserStore
|
|
|
|
|
|
|
|
} from "@/store";
|
|
|
|
const generating = ref(false);
|
|
|
|
import RPC from "@/utils/request";
|
|
|
|
|
|
|
|
import {
|
|
|
|
// 响应式数据
|
|
|
|
usePermission
|
|
|
|
const selectedTemplate = ref("passenger");
|
|
|
|
} from "@/hooks/usePermission";
|
|
|
|
|
|
|
|
|
|
|
|
// 选择模板
|
|
|
|
const authStore = useAuthStore();
|
|
|
|
const selectTemplate = (template) => {
|
|
|
|
const userStore = useUserStore();
|
|
|
|
selectedTemplate.value = template;
|
|
|
|
const loading = ref(false)
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
const generating = ref(false);
|
|
|
|
const form = ref(null);
|
|
|
|
const modalRef = ref(null)
|
|
|
|
const formField = ref({
|
|
|
|
const confirmGenerate = () => {
|
|
|
|
phone: "",
|
|
|
|
const params = {}
|
|
|
|
password: "",
|
|
|
|
currentTemplate.value.params.forEach(item => {
|
|
|
|
});
|
|
|
|
params[item.name] = item.value
|
|
|
|
const rules = ref({
|
|
|
|
})
|
|
|
|
// 'phone': {
|
|
|
|
RPC.post('/template_create_task', {template_id:currentTemplate.value.id,template_data:params}).then(() => {
|
|
|
|
// required: true,
|
|
|
|
|
|
|
|
// message: '请填写手机号',
|
|
|
|
uni.showToast({
|
|
|
|
// trigger: ['blur', 'change']
|
|
|
|
title: "图纸开始生成",
|
|
|
|
// },
|
|
|
|
icon: "success",
|
|
|
|
// 'password': {
|
|
|
|
});
|
|
|
|
// required: true,
|
|
|
|
setTimeout(() => {
|
|
|
|
// message: '请填写验证码',
|
|
|
|
uni.navigateTo({
|
|
|
|
// trigger: ['blur', 'change']
|
|
|
|
url: "/pagesA/generate-record/generate-record",
|
|
|
|
// }
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}, 1000)
|
|
|
|
|
|
|
|
modalRef.value.close()
|
|
|
|
// 生成图纸
|
|
|
|
})
|
|
|
|
const generateDrawing = async () => {
|
|
|
|
}
|
|
|
|
if (!selectedTemplate.value) {
|
|
|
|
const templateList = ref([])
|
|
|
|
uni.showToast({
|
|
|
|
const currentTemplate = ref({})
|
|
|
|
title: "请选择图纸模板",
|
|
|
|
const getList = () => {
|
|
|
|
icon: "none",
|
|
|
|
loading.value = true
|
|
|
|
});
|
|
|
|
RPC.post('/template/list', {
|
|
|
|
return;
|
|
|
|
page: 1,
|
|
|
|
}
|
|
|
|
limit: -1
|
|
|
|
|
|
|
|
}).then(res => {
|
|
|
|
generating.value = true;
|
|
|
|
templateList.value = res.rows || []
|
|
|
|
try {
|
|
|
|
currentTemplate.value = res.rows[0] ? JSON.parse(JSON.stringify(res.rows[0])) : {}
|
|
|
|
const params = {};
|
|
|
|
}).finally(() => {
|
|
|
|
|
|
|
|
loading.value = false
|
|
|
|
// 这里调用生成图纸的API
|
|
|
|
})
|
|
|
|
// const result = await RPC.post('/api/generate-drawing', params)
|
|
|
|
}
|
|
|
|
|
|
|
|
getList()
|
|
|
|
uni.showToast({
|
|
|
|
|
|
|
|
title: "图纸生成中...",
|
|
|
|
// 选择模板
|
|
|
|
icon: "loading",
|
|
|
|
const selectTemplate = (item) => {
|
|
|
|
duration: 2000,
|
|
|
|
currentTemplate.value = JSON.parse(JSON.stringify(item));
|
|
|
|
});
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 模拟生成过程
|
|
|
|
const form = ref(null);
|
|
|
|
setTimeout(() => {
|
|
|
|
const formField = ref({
|
|
|
|
uni.showToast({
|
|
|
|
phone: "",
|
|
|
|
title: "图纸生成成功",
|
|
|
|
password: "",
|
|
|
|
icon: "success",
|
|
|
|
});
|
|
|
|
});
|
|
|
|
const rules = ref({
|
|
|
|
generating.value = false;
|
|
|
|
// 'phone': {
|
|
|
|
}, 2000);
|
|
|
|
// required: true,
|
|
|
|
} catch (error) {
|
|
|
|
// message: '请填写手机号',
|
|
|
|
console.error("生成图纸失败:", error);
|
|
|
|
// trigger: ['blur', 'change']
|
|
|
|
uni.showToast({
|
|
|
|
// },
|
|
|
|
title: "生成失败，请重试",
|
|
|
|
// 'password': {
|
|
|
|
icon: "none",
|
|
|
|
// required: true,
|
|
|
|
});
|
|
|
|
// message: '请填写验证码',
|
|
|
|
generating.value = false;
|
|
|
|
// trigger: ['blur', 'change']
|
|
|
|
}
|
|
|
|
// }
|
|
|
|
};
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 查看历史记录
|
|
|
|
|
|
|
|
const viewHistory = () => {
|
|
|
|
|
|
|
|
console.log(111);
|
|
|
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
|
|
|
url: "/pagesA/generate-record/generate-record",
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 分享给朋友
|
|
|
|
// 查看历史记录
|
|
|
|
onShareAppMessage((data) => {
|
|
|
|
const viewHistory = () => {
|
|
|
|
console.log("🚀 ~ onShareAppMessage ~ data:", data);
|
|
|
|
uni.navigateTo({
|
|
|
|
return {
|
|
|
|
url: "/pagesA/generate-record/generate-record",
|
|
|
|
title: "电梯图纸生成平台",
|
|
|
|
});
|
|
|
|
path: "/pages/index/index",
|
|
|
|
};
|
|
|
|
};
|
|
|
|
|
|
|
|
});
|
|
|
|
// 分享给朋友
|
|
|
|
|
|
|
|
onShareAppMessage((data) => {
|
|
|
|
|
|
|
|
console.log("🚀 ~ onShareAppMessage ~ data:", data);
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
|
|
|
title: "电梯图纸生成平台",
|
|
|
|
|
|
|
|
path: "/pages/index/index",
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 分享到朋友圈
|
|
|
|
// 分享到朋友圈
|
|
|
|
onShareTimeline((data) => {
|
|
|
|
onShareTimeline((data) => {
|
|
|
|
console.log("🚀 ~ onShareTimeline ~ data:", data);
|
|
|
|
console.log("🚀 ~ onShareTimeline ~ data:", data);
|
|
|
|
return {
|
|
|
|
return {
|
|
|
|
title: "电梯图纸生成平台",
|
|
|
|
title: "电梯图纸生成平台",
|
|
|
|
query: "a=1&b=2",
|
|
|
|
query: "a=1&b=2",
|
|
|
|
};
|
|
|
|
};
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
onLoad(() => {
|
|
|
|
onLoad(() => {
|
|
|
|
console.log("index-onLoad");
|
|
|
|
console.log("index-onLoad");
|
|
|
|
});
|
|
|
|
});
|
|
|
|
onShow(async () => {
|
|
|
|
onShow(async () => {
|
|
|
|
console.log("test page onShow");
|
|
|
|
console.log("test page onShow");
|
|
|
|
const hasPermission = await usePermission();
|
|
|
|
const hasPermission = await usePermission();
|
|
|
|
console.log(hasPermission ? "已登录" : "跳转登录");
|
|
|
|
console.log(hasPermission ? "已登录" : "跳转登录");
|
|
|
|
// 以下开始写业务逻辑...
|
|
|
|
// 以下开始写业务逻辑...
|
|
|
|
if(!hasPermission) {
|
|
|
|
if (!hasPermission) {
|
|
|
|
authStore.signOut();
|
|
|
|
authStore.signOut();
|
|
|
|
uni.$uv.route("/pages/login/login");
|
|
|
|
uni.$uv.route("/pages/login/login");
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
});
|
|
|
|
</script>
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.container {
|
|
|
|
.container {
|
|
|
|
font-size: 14px;
|
|
|
|
font-size: 14px;
|
|
|
|
min-height: 100vh;
|
|
|
|
min-height: 100vh;
|
|
|
|
background-color: #f8f8f8;
|
|
|
|
background-color: #f8f8f8;
|
|
|
|
padding-bottom: 52px;
|
|
|
|
padding-bottom: 52px;
|
|
|
|
|
|
|
|
|
|
|
|
/* #ifdef H5 */
|
|
|
|
/* #ifdef H5 */
|
|
|
|
padding-bottom: 102px; /* H5环境下需要更多空间 (50px按钮 + 50px tabBar + 2px间距) */
|
|
|
|
padding-bottom: 102px;
|
|
|
|
/* #endif */
|
|
|
|
/* H5环境下需要更多空间 (50px按钮 + 50px tabBar + 2px间距) */
|
|
|
|
}
|
|
|
|
/* #endif */
|
|
|
|
|
|
|
|
}
|
|
|
|
.header-section {
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
.header-section {
|
|
|
|
height: 200px;
|
|
|
|
position: relative;
|
|
|
|
overflow: hidden;
|
|
|
|
height: 200px;
|
|
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
.header-image {
|
|
|
|
|
|
|
|
width: 100%;
|
|
|
|
.header-image {
|
|
|
|
height: 100%;
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
height: 100%;
|
|
|
|
|
|
|
|
}
|
|
|
|
.header-overlay {
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
.header-overlay {
|
|
|
|
top: 50%;
|
|
|
|
position: absolute;
|
|
|
|
right: 0;
|
|
|
|
top: 50%;
|
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
|
right: 0;
|
|
|
|
color: white;
|
|
|
|
background: rgba(0, 0, 0, 0.5);
|
|
|
|
width: 70%;
|
|
|
|
color: white;
|
|
|
|
transform: translate(0, -50%);
|
|
|
|
width: 70%;
|
|
|
|
padding: 20px 10px;
|
|
|
|
transform: translate(0, -50%);
|
|
|
|
|
|
|
|
padding: 20px 10px;
|
|
|
|
.header-title {
|
|
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
.header-title {
|
|
|
|
font-weight: bold;
|
|
|
|
font-size: 16px;
|
|
|
|
margin-bottom: 8px;
|
|
|
|
font-weight: bold;
|
|
|
|
color: #bd9e85;
|
|
|
|
margin-bottom: 8px;
|
|
|
|
}
|
|
|
|
color: #bd9e85;
|
|
|
|
|
|
|
|
}
|
|
|
|
.header-subtitle {
|
|
|
|
|
|
|
|
font-size: 12px;
|
|
|
|
.header-subtitle {
|
|
|
|
}
|
|
|
|
font-size: 12px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
.section {
|
|
|
|
|
|
|
|
margin: 16px;
|
|
|
|
.section {
|
|
|
|
background: white;
|
|
|
|
margin: 16px;
|
|
|
|
border-radius: 12px;
|
|
|
|
background: white;
|
|
|
|
padding: 16px;
|
|
|
|
border-radius: 12px;
|
|
|
|
|
|
|
|
padding: 16px;
|
|
|
|
.section-title {
|
|
|
|
|
|
|
|
font-size: 16px;
|
|
|
|
.section-title {
|
|
|
|
font-weight: bold;
|
|
|
|
font-size: 16px;
|
|
|
|
color: #333;
|
|
|
|
font-weight: bold;
|
|
|
|
margin-bottom: 16px;
|
|
|
|
color: #333;
|
|
|
|
}
|
|
|
|
margin-bottom: 16px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
.template-grid {
|
|
|
|
|
|
|
|
display: grid;
|
|
|
|
.template-grid {
|
|
|
|
grid-template-columns: 1fr 1fr;
|
|
|
|
display: grid;
|
|
|
|
gap: 12px;
|
|
|
|
grid-template-columns: 1fr 1fr;
|
|
|
|
|
|
|
|
gap: 12px;
|
|
|
|
.template-item {
|
|
|
|
max-height: 200px;
|
|
|
|
border: 1px solid #e5e5e5;
|
|
|
|
overflow-y: auto;
|
|
|
|
border-radius: 8px;
|
|
|
|
|
|
|
|
padding: 16px 12px;
|
|
|
|
.template-item {
|
|
|
|
text-align: center;
|
|
|
|
border: 1px solid #e5e5e5;
|
|
|
|
transition: all 0.3s;
|
|
|
|
border-radius: 8px;
|
|
|
|
|
|
|
|
padding: 16px 12px;
|
|
|
|
&.active {
|
|
|
|
text-align: center;
|
|
|
|
border-color: #4285f4;
|
|
|
|
transition: all 0.3s;
|
|
|
|
background-color: #f0f7ff;
|
|
|
|
|
|
|
|
}
|
|
|
|
&.active {
|
|
|
|
|
|
|
|
border-color: #4285f4;
|
|
|
|
.template-name {
|
|
|
|
background-color: #f0f7ff;
|
|
|
|
font-size: 14px;
|
|
|
|
}
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
|
|
color: #333;
|
|
|
|
.template-name {
|
|
|
|
margin: 8px 0 4px;
|
|
|
|
font-size: 14px;
|
|
|
|
}
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
|
|
color: #333;
|
|
|
|
.template-desc {
|
|
|
|
margin: 8px 0 4px;
|
|
|
|
font-size: 12px;
|
|
|
|
}
|
|
|
|
color: #999;
|
|
|
|
|
|
|
|
}
|
|
|
|
.template-desc {
|
|
|
|
}
|
|
|
|
font-size: 12px;
|
|
|
|
}
|
|
|
|
color: #999;
|
|
|
|
|
|
|
|
}
|
|
|
|
.bottom-actions {
|
|
|
|
}
|
|
|
|
z-index: 999;
|
|
|
|
}
|
|
|
|
position: fixed;
|
|
|
|
|
|
|
|
bottom: 0;
|
|
|
|
.bottom-actions {
|
|
|
|
left: 0;
|
|
|
|
z-index: 999;
|
|
|
|
background: #fff;
|
|
|
|
position: fixed;
|
|
|
|
height: 50px;
|
|
|
|
bottom: 0;
|
|
|
|
border-top: 1px solid #e5e5e5;
|
|
|
|
left: 0;
|
|
|
|
display: flex;
|
|
|
|
background: #fff;
|
|
|
|
align-items: center;
|
|
|
|
height: 50px;
|
|
|
|
gap: 12px;
|
|
|
|
border-top: 1px solid #e5e5e5;
|
|
|
|
justify-content: space-between;
|
|
|
|
display: flex;
|
|
|
|
padding: 0 16px;
|
|
|
|
align-items: center;
|
|
|
|
box-sizing: border-box;
|
|
|
|
gap: 12px;
|
|
|
|
width: 100%;
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
padding: 0 16px;
|
|
|
|
/* #ifdef H5 */
|
|
|
|
box-sizing: border-box;
|
|
|
|
bottom: 50px; /* H5环境下给tabBar留出空间 */
|
|
|
|
width: 100%;
|
|
|
|
/* #endif */
|
|
|
|
|
|
|
|
}
|
|
|
|
/* #ifdef H5 */
|
|
|
|
|
|
|
|
bottom: 50px;
|
|
|
|
|
|
|
|
/* H5环境下给tabBar留出空间 */
|
|
|
|
|
|
|
|
/* #endif */
|
|
|
|
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
<style lang="scss">
|
|
|
|
.bottom-actions {
|
|
|
|
.bottom-actions {
|
|
|
|
.uv-button-wrapper {
|
|
|
|
.uv-button-wrapper {
|
|
|
|
width: 48%;
|
|
|
|
width: 48%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
