肖正
3 months ago
54 changed files with 1795 additions and 240 deletions
@ -0,0 +1,29 @@ |
|||||
|
import request from '/@/utils/request'; |
||||
|
|
||||
|
export function getList(api, data) { |
||||
|
return request({ |
||||
|
url: `/api/${api}/getList`, |
||||
|
method: 'post', |
||||
|
data, |
||||
|
}); |
||||
|
} |
||||
|
export function add(api, data) { |
||||
|
return request({ |
||||
|
url: `/api/${api}/add`, |
||||
|
method: 'post', |
||||
|
data, |
||||
|
}); |
||||
|
} |
||||
|
export function update(api, data) { |
||||
|
return request({ |
||||
|
url: `/api/${api}/update`, |
||||
|
method: 'post', |
||||
|
data, |
||||
|
}); |
||||
|
} |
||||
|
export function del(api, id) { |
||||
|
return request({ |
||||
|
url: `/api/${api}/delete/${id}`, |
||||
|
method: 'post', |
||||
|
}); |
||||
|
} |
||||
@ -0,0 +1,28 @@ |
|||||
|
import request from '/@/utils/request'; |
||||
|
// import type { ResultData } from './common';
|
||||
|
export function getDeviceInfo() { |
||||
|
return request({ |
||||
|
baseURL: 'http://39.108.191.53:8089', |
||||
|
url: '/api/v1/device?page=1&limit=20', |
||||
|
method: 'get', |
||||
|
}); |
||||
|
} |
||||
|
export function getEZUIKitToken(data) { |
||||
|
return request({ |
||||
|
baseURL: 'https://open.ys7.com', |
||||
|
url: '/api/lapp/token/get', |
||||
|
headers: { |
||||
|
'Content-Type': 'application/x-www-form-urlencoded', |
||||
|
}, |
||||
|
method: 'post', |
||||
|
data, |
||||
|
}); |
||||
|
} |
||||
|
// export function list(params: any) {
|
||||
|
// return request({
|
||||
|
// eslint-disable-next-line no-irregular-whitespace
|
||||
|
// url: "/list",
|
||||
|
// method: "get",
|
||||
|
// params,
|
||||
|
// });
|
||||
|
// }
|
||||
|
Before Width: | Height: | Size: 1.5 MiB After Width: | Height: | Size: 670 KiB |
|
After Width: | Height: | Size: 918 KiB |
|
After Width: | Height: | Size: 302 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 4.2 KiB |
|
After Width: | Height: | Size: 2.4 MiB |
@ -0,0 +1,40 @@ |
|||||
|
DS-Font's TrueType Fonts |
||||
|
Font name: DS-Digital (Normal, Bold, Italic, Bold Italic), Version 1.0 |
||||
|
Author: Dusit Supasawat |
||||
|
Web Site: http://ds-font.hypermart.net |
||||
|
Contact me: Dusit Supasawat, 325/38 Suksawat32 Ratburana Bangkok Thailand 10140 |
||||
|
Email address: dusit@mailcity.com |
||||
|
|
||||
|
Thanks for trying! We hope you really enjoy this my typeface. This font is |
||||
|
distributed as shareware. You can use this font for a long time as you want. |
||||
|
After all, when you think this font can be usefulness for you. You can send |
||||
|
me some money, that would be way cool. |
||||
|
|
||||
|
I'm only asking $20 US shareware fee per this typeface for personal use. |
||||
|
And $45 US is the usual amount per this typeface for commercial use. |
||||
|
|
||||
|
Distribution: You are free to distribute this archive so long as this text |
||||
|
file is distributed with the archive, the font file have not been modified, |
||||
|
and it is understood that the font's copyright remains with the original |
||||
|
author (Dusit Supasawat). |
||||
|
|
||||
|
To register send your payment to: |
||||
|
|
||||
|
Dusit Supasawat |
||||
|
325/38 Suksawat32 Ratburana |
||||
|
Bangkok Thailand 10140 |
||||
|
|
||||
|
And fill out something as this order form, and send it in with your payment. |
||||
|
|
||||
|
Font name:_________________________________________ |
||||
|
Your information |
||||
|
Name:______________________________________________ |
||||
|
Address:___________________________________________ |
||||
|
City, State : _____________________________________ |
||||
|
Zip Code:__________________________________________ |
||||
|
Country:___________________________________________ |
||||
|
E-MAIL address:____________________________________ |
||||
|
|
||||
|
|
||||
|
You will receive fonts which you order by Email after registration. These fonts |
||||
|
will be generated for you by specify your name in font information. |
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 444 KiB After Width: | Height: | Size: 62 KiB |
|
After Width: | Height: | Size: 1.8 KiB |
|
After Width: | Height: | Size: 4.9 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 268 KiB |
|
Before Width: | Height: | Size: 399 KiB After Width: | Height: | Size: 27 KiB |
Binary file not shown.
@ -0,0 +1,154 @@ |
|||||
|
<template> |
||||
|
<div class="sys-menu-container"> |
||||
|
<el-dialog v-model="state.isShowDialog" draggable :close-on-click-modal="false" width="500px"> |
||||
|
<template #header> |
||||
|
<div style="color: #fff"> |
||||
|
<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon> |
||||
|
<span> {{ props.title }} </span> |
||||
|
</div> |
||||
|
</template> |
||||
|
<el-form :model="state.ruleForm" ref="ruleFormRef" label-width="auto"> |
||||
|
<el-row :gutter="35"> |
||||
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> |
||||
|
<el-form-item label="客户名称" prop="name" :rules="[{ required: true, message: '客户名称不能为空', trigger: 'blur' }]"> |
||||
|
<el-input v-model="state.ruleForm.name" placeholder="客户名称" clearable /> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> |
||||
|
<el-form-item label="客户电话" prop="phone" :rules="[{ required: true, message: '客户电话不能为空', trigger: 'blur' }]"> |
||||
|
<el-input v-model="state.ruleForm.phone" placeholder="客户电话" clearable /> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> |
||||
|
<el-form-item label="性别" prop="isMale" :rules="[{ required: true, message: '性别不能为空', trigger: 'blur' }]"> |
||||
|
<el-radio-group v-model="state.ruleForm.isMale"> |
||||
|
<el-radio :value="false">男</el-radio> |
||||
|
<el-radio :value="true">女</el-radio> |
||||
|
</el-radio-group> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> |
||||
|
<el-form-item label="身份证号"> |
||||
|
<el-input v-model="state.ruleForm.idCard" placeholder="身份证号" clearable /> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> |
||||
|
<el-form-item label="备注"> |
||||
|
<el-input v-model="state.ruleForm.remark" placeholder="请输入备注内容" clearable type="textarea" /> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> |
||||
|
<el-form-item label="个人形象照"> |
||||
|
<el-upload |
||||
|
class="avatar-uploader" |
||||
|
:action="baseUrl+'/api/sysFile/uploadFile'" |
||||
|
:show-file-list="false" |
||||
|
:headers="{Authorization: `Bearer ${state.token}`}" |
||||
|
:on-success="handleAvatarSuccess" |
||||
|
> |
||||
|
<img v-if="state.ruleForm.imageUrl" :src="state.ruleForm.imageUrl" class="avatar" /> |
||||
|
<el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon> |
||||
|
</el-upload> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" class="mb20"> |
||||
|
<el-form-item label="声音"> |
||||
|
<el-upload |
||||
|
v-model:file-list="fileList" |
||||
|
class="upload-demo" |
||||
|
:action="baseUrl+'/api/sysFile/uploadFile'" |
||||
|
multiple |
||||
|
:headers="{Authorization: `Bearer ${state.token}`}" |
||||
|
:on-success="handleSuccess" |
||||
|
:on-remove="handleRemove" |
||||
|
:limit="1" |
||||
|
> |
||||
|
<el-button type="primary">点击上传</el-button> |
||||
|
</el-upload> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-form> |
||||
|
<template #footer> |
||||
|
<span class="dialog-footer"> |
||||
|
<el-button @click="cancel">取 消</el-button> |
||||
|
<el-button type="primary" @click="submit">确 定</el-button> |
||||
|
</span> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup name="sysEdit"> |
||||
|
import { reactive, ref } from 'vue'; |
||||
|
import { add, update } from '/@/api/api'; |
||||
|
import type { UploadProps, UploadUserFile } from 'element-plus' |
||||
|
import { Plus } from '@element-plus/icons-vue' |
||||
|
import { Local } from '/@/utils/storage'; |
||||
|
|
||||
|
const props = defineProps({ |
||||
|
title: String, |
||||
|
}); |
||||
|
const baseUrl = window.__env__.VITE_API_URL |
||||
|
const fileList = ref<UploadUserFile[]>([]) |
||||
|
const emits = defineEmits(['handleQuery']); |
||||
|
const ruleFormRef = ref(); |
||||
|
const state = reactive({ |
||||
|
isShowDialog: false, |
||||
|
dialogUploadVisible: false, |
||||
|
ruleForm: {} as any, |
||||
|
token: Local.get('access-token') |
||||
|
}); |
||||
|
|
||||
|
// 打开弹窗 |
||||
|
const openDialog = (row: any) => { |
||||
|
state.ruleForm = JSON.parse(JSON.stringify(row)); |
||||
|
state.isShowDialog = true; |
||||
|
ruleFormRef.value?.resetFields(); |
||||
|
}; |
||||
|
const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => { |
||||
|
console.log(file, uploadFiles) |
||||
|
} |
||||
|
|
||||
|
const handleSuccess: UploadProps['onSuccess'] = (uploadFile) => { |
||||
|
// console.log(98, uploadFile) |
||||
|
state.ruleForm.voiceUrl = uploadFile?.result?.url; |
||||
|
} |
||||
|
// 关闭弹窗 |
||||
|
const closeDialog = () => { |
||||
|
emits('handleQuery'); |
||||
|
state.isShowDialog = false; |
||||
|
}; |
||||
|
const handleAvatarSuccess: UploadProps['onSuccess'] = ( |
||||
|
response |
||||
|
) => { |
||||
|
state.ruleForm.imageUrl = response?.result?.url; |
||||
|
} |
||||
|
// 取消 |
||||
|
const cancel = () => { |
||||
|
state.isShowDialog = false; |
||||
|
}; |
||||
|
|
||||
|
// 提交 |
||||
|
const submit = () => { |
||||
|
ruleFormRef.value.validate(async (valid: boolean) => { |
||||
|
if (!valid) return; |
||||
|
if (state.ruleForm.id != undefined && state.ruleForm.id > 0) { |
||||
|
await update('customer', state.ruleForm); |
||||
|
} else { |
||||
|
await add('customer', state.ruleForm); |
||||
|
} |
||||
|
closeDialog(); |
||||
|
}); |
||||
|
}; |
||||
|
|
||||
|
// 导出对象 |
||||
|
defineExpose({ openDialog }); |
||||
|
</script> |
||||
|
<style scoped> |
||||
|
.avatar-uploader .avatar { |
||||
|
width: 178px; |
||||
|
height: 178px; |
||||
|
display: block; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,216 @@ |
|||||
|
<template> |
||||
|
<div class="customer-box"> |
||||
|
<el-card shadow="hover" :body-style="{ paddingBottom: '0' }"> |
||||
|
<el-form :model="state.queryParams" ref="queryForm" :inline="true"> |
||||
|
<el-form-item label="客户名称"> |
||||
|
<el-input v-model="state.queryParams.name" placeholder="客户名称" clearable /> |
||||
|
</el-form-item> |
||||
|
<el-form-item label="客户电话"> |
||||
|
<el-input v-model="state.queryParams.phone" placeholder="客户电话" clearable /> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button-group> |
||||
|
<el-button type="primary" icon="ele-Search" @click="handleQuery" v-auth="'sysMenu:list'"> 查询 </el-button> |
||||
|
<el-button icon="ele-Refresh" @click="resetQuery"> 重置 </el-button> |
||||
|
</el-button-group> |
||||
|
</el-form-item> |
||||
|
<el-form-item> |
||||
|
<el-button type="primary" icon="ele-Plus" @click="openAddMenu" v-auth="'sysMenu:add'"> 新增 </el-button> |
||||
|
<!-- <el-button type="primary" icon="ele-Plus" @click="openInfo({})" v-auth="'sysMenu:add'"> 新增 </el-button> --> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
</el-card> |
||||
|
|
||||
|
<el-card class="full-table" shadow="hover" style="margin-top: 5px"> |
||||
|
<el-table :data="state.tableData" v-loading="state.loading" row-key="id" border> |
||||
|
<el-table-column prop="name" label="客户名称" align="center" show-overflow-tooltip /> |
||||
|
<el-table-column label="形象" width="150" align="center" show-overflow-tooltip> |
||||
|
<template #default="scope"> |
||||
|
<el-image style="width: 50px" v-if="scope.row.imageUrl" :src="scope.row.imageUrl" fit="contain" /> |
||||
|
<span v-else>--</span> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column prop="phone" label="客户电话" align="center" show-overflow-tooltip /> |
||||
|
<el-table-column prop="idCard" label="身份证号" align="center" show-overflow-tooltip /> |
||||
|
<el-table-column label="性别" width="150" align="center" show-overflow-tooltip> |
||||
|
<template #default="scope"> |
||||
|
<el-tag type="success" v-if="scope.row.isMale">女</el-tag> |
||||
|
<el-tag type="primary" v-else>男</el-tag> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="修改记录" width="200" align="center" show-overflow-tooltip> |
||||
|
<template #default="scope"> |
||||
|
<el-popover placement="bottom" width="280" trigger="hover"> |
||||
|
<template #reference> |
||||
|
<el-text type="primary"> |
||||
|
<el-icon><ele-InfoFilled /></el-icon>详情 |
||||
|
</el-text> |
||||
|
</template> |
||||
|
<el-descriptions direction="vertical" :column="2" border> |
||||
|
<el-descriptions-item width="140"> |
||||
|
<template #label> |
||||
|
<el-text> |
||||
|
<el-icon><ele-UserFilled /></el-icon>创建者 |
||||
|
</el-text> |
||||
|
</template> |
||||
|
<el-tag>{{ scope.row.createUserName ?? '无' }}</el-tag> |
||||
|
</el-descriptions-item> |
||||
|
<el-descriptions-item> |
||||
|
<template #label> |
||||
|
<el-text> |
||||
|
<el-icon><ele-Calendar /></el-icon>创建时间 |
||||
|
</el-text> |
||||
|
</template> |
||||
|
<el-tag>{{ scope.row.createTime ?? '无' }}</el-tag> |
||||
|
</el-descriptions-item> |
||||
|
<el-descriptions-item> |
||||
|
<template #label> |
||||
|
<el-text> |
||||
|
<el-icon><ele-UserFilled /></el-icon>修改者 |
||||
|
</el-text> |
||||
|
</template> |
||||
|
<el-tag>{{ scope.row.updateUserName ?? '无' }}</el-tag> |
||||
|
</el-descriptions-item> |
||||
|
<el-descriptions-item> |
||||
|
<template #label> |
||||
|
<el-text> |
||||
|
<el-icon><ele-Calendar /></el-icon>修改时间 |
||||
|
</el-text> |
||||
|
</template> |
||||
|
<el-tag>{{ scope.row.updateTime ?? '无' }}</el-tag> |
||||
|
</el-descriptions-item> |
||||
|
<el-descriptions-item> |
||||
|
<template #label> |
||||
|
<el-text> |
||||
|
<el-icon><ele-Tickets /></el-icon>备注 |
||||
|
</el-text> |
||||
|
</template> |
||||
|
{{ scope.row.remark }} |
||||
|
</el-descriptions-item> |
||||
|
</el-descriptions> |
||||
|
</el-popover> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
<el-table-column label="操作" width="200" fixed="right" align="center" show-overflow-tooltip> |
||||
|
<template #default="scope"> |
||||
|
<el-button icon="ele-Edit" size="small" text type="primary" @click="openInfo(scope.row)" v-auth="'sysMenu:update'"> 详情 </el-button> |
||||
|
<el-button icon="ele-Edit" size="small" text type="primary" @click="openEditMenu(scope.row)" v-auth="'sysMenu:update'"> 编辑 </el-button> |
||||
|
<el-button icon="ele-Delete" size="small" text type="danger" @click="delMenu(scope.row)" v-auth="'sysMenu:delete'"> 删除 </el-button> |
||||
|
</template> |
||||
|
</el-table-column> |
||||
|
</el-table> |
||||
|
<el-pagination |
||||
|
v-model:currentPage="state.tableParams.page" |
||||
|
v-model:page-size="state.tableParams.pageSize" |
||||
|
:total="state.tableParams.total" |
||||
|
:page-sizes="[10, 20, 50, 100]" |
||||
|
small |
||||
|
background |
||||
|
@size-change="handleSizeChange" |
||||
|
@current-change="handleCurrentChange" |
||||
|
layout="total, sizes, prev, pager, next, jumper" |
||||
|
/> |
||||
|
</el-card> |
||||
|
<EditCustomer ref="editRef" :title="state.editTitle" @handleQuery="handleQuery" /> |
||||
|
<CustomerInfo ref="infoRef" :title="state.infoTitle" @handleQuery="handleQuery" /> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script lang="ts" setup name="customer" > |
||||
|
import { onMounted, reactive, ref } from 'vue'; |
||||
|
import { ElMessageBox, ElMessage } from 'element-plus'; |
||||
|
import EditCustomer from './edit.vue'; |
||||
|
import CustomerInfo from './info.vue'; |
||||
|
import { SysMenu } from '/@/api-services/models'; |
||||
|
import { getList, del } from '../../api/api'; |
||||
|
import { storeToRefs } from 'pinia'; |
||||
|
import { useThemeConfig } from '/@/stores/themeConfig'; |
||||
|
const storesThemeConfig = useThemeConfig(); |
||||
|
const { themeConfig } = storeToRefs(storesThemeConfig); |
||||
|
|
||||
|
const editRef = ref(); |
||||
|
const infoRef = ref(); |
||||
|
const state = reactive({ |
||||
|
loading: false, |
||||
|
tableData: [] as Array<SysMenu>, |
||||
|
queryParams: { |
||||
|
name: undefined, |
||||
|
phone: undefined, |
||||
|
}, |
||||
|
tableParams: { |
||||
|
page: 1, |
||||
|
pageSize: 10, |
||||
|
total: 0 as any, |
||||
|
}, |
||||
|
editTitle: '', |
||||
|
infoTitle: '', |
||||
|
}); |
||||
|
|
||||
|
onMounted(async () => { |
||||
|
console.log(888, themeConfig.value.isIsDark) |
||||
|
themeConfig.value.isIsDark = false; |
||||
|
handleQuery(); |
||||
|
}); |
||||
|
|
||||
|
// 查询操作 |
||||
|
const handleQuery = async () => { |
||||
|
state.loading = true; |
||||
|
let params = Object.assign(state.queryParams, state.tableParams); |
||||
|
var res = await getList('customer', params); |
||||
|
state.tableData = res.data.result?.items ?? []; |
||||
|
state.tableParams.total = res.data.result?.total; |
||||
|
state.loading = false; |
||||
|
}; |
||||
|
|
||||
|
// 重置操作 |
||||
|
const resetQuery = () => { |
||||
|
state.queryParams.name = undefined; |
||||
|
state.queryParams.phone = undefined; |
||||
|
handleQuery(); |
||||
|
}; |
||||
|
|
||||
|
// 打开新增页面 |
||||
|
const openAddMenu = () => { |
||||
|
state.editTitle = '添加客户'; |
||||
|
editRef.value?.openDialog({ type: 2, isHide: false, isKeepAlive: true, isAffix: false, isIframe: false, status: 1, orderNo: 100 }); |
||||
|
}; |
||||
|
|
||||
|
// 打开编辑页面 |
||||
|
const openEditMenu = (row: any) => { |
||||
|
state.editTitle = '编辑客户'; |
||||
|
editRef.value?.openDialog(row); |
||||
|
}; |
||||
|
const openInfo = (row: any) => { |
||||
|
state.infoTitle = `${row.name} 的数字生命`; |
||||
|
infoRef.value?.openDrawer(row); |
||||
|
}; |
||||
|
|
||||
|
// 删除当前行 |
||||
|
const delMenu = (row: any) => { |
||||
|
ElMessageBox.confirm(`确定删除客户：【${row.name}】?`, '提示', { |
||||
|
confirmButtonText: '确定', |
||||
|
cancelButtonText: '取消', |
||||
|
type: 'warning', |
||||
|
}) |
||||
|
.then(async () => { |
||||
|
await del('customer', row.id ); |
||||
|
handleQuery(); |
||||
|
ElMessage.success('删除成功'); |
||||
|
}) |
||||
|
.catch(() => {}); |
||||
|
}; |
||||
|
// 改变页面容量 |
||||
|
const handleSizeChange = (val: number) => { |
||||
|
state.tableParams.pageSize = val; |
||||
|
handleQuery(); |
||||
|
}; |
||||
|
|
||||
|
// 改变页码序号 |
||||
|
const handleCurrentChange = (val: number) => { |
||||
|
state.tableParams.page = val; |
||||
|
handleQuery(); |
||||
|
}; |
||||
|
</script> |
||||
|
<style scoped lang="scss"> |
||||
|
$color: rgb(211, 130, 50); |
||||
|
</style> |
||||
@ -0,0 +1,427 @@ |
|||||
|
<template> |
||||
|
<el-drawer v-model="drawer" :direction="direction" class="cursor-info" size="100%"> |
||||
|
<template #default> |
||||
|
<div class="orido_tm_hero"> |
||||
|
<div class="close-box" @click="closeDrawer"> |
||||
|
<el-icon class="info-close"><CloseBold /></el-icon> |
||||
|
</div> |
||||
|
<div class="container"> |
||||
|
<div class="title-heading"> |
||||
|
<div class="alert"> |
||||
|
<span class="badge">Hot</span> |
||||
|
<span class="content">生命数据库</span> |
||||
|
</div> |
||||
|
<h1 class="heading">肖正的生命数据库</h1> |
||||
|
<p class="pera-title">Obviously I'm a Web Designer. Web Developer with over 3 years of experience. Experienced with all stages of the development</p> |
||||
|
<div class="hero-btn"> |
||||
|
<el-button type="primary" size="default">体检报告</el-button> |
||||
|
<el-button size="default">细胞储存信息</el-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
<img src="/@/assets/customer/xiaozheng.png" class="author" alt=""> |
||||
|
<div class="video_button"> |
||||
|
<a class="popup-youtube" href="https://www.youtube.com/watch?v=7e90gBu4pas"> |
||||
|
<img class="anim_circle" src="/@/assets/customer/welcome.png" alt=""> |
||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="25" viewBox="0 0 20 25" fill="none" class="svg replaced-svg"> |
||||
|
<path d="M0.693848 0.149658V24.7257L19.3059 12.4377L0.693848 0.149658Z" fill="white"></path> |
||||
|
</svg> |
||||
|
</a> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="section bg-light"> |
||||
|
<div class="container"> |
||||
|
<div class="container-title"> |
||||
|
<h2>体检报告</h2> |
||||
|
<p class="pera-title">体检时间：2024-07-31；体检机构：东莞松山湖基地</p> |
||||
|
</div> |
||||
|
<div class="content-box"> |
||||
|
<div class="content-item" v-for="(item, i) in 6" :key="i"> |
||||
|
<div class="feature-widget"> |
||||
|
<div style="margin-bottom: 16px;"> |
||||
|
<el-icon size="38" class="info-icon"><House /></el-icon> |
||||
|
</div> |
||||
|
<h3>肝癌</h3> |
||||
|
<p class="text-light-muted">中国人群肝癌平均遗传风险为 22.2，您的遗传风险值为 10 是平均遗传风险的0.45 倍；处于较低风险（2 级） 。</p> |
||||
|
<p>遗传相对风险指数：<span>0.8</span></p> |
||||
|
<p>遗传相对风险等级：<span>略低</span></p> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div class="device-box"> |
||||
|
<div class="container"> |
||||
|
<el-carousel :interval="5000" height="600px" @change="changeImg" indicator-position="outside"> |
||||
|
<el-carousel-item v-for="(item,index) in state.images" :key="index"> |
||||
|
<el-row class="device-box-item"> |
||||
|
<el-col :span="9" class="cold-storage-content"> |
||||
|
<el-image |
||||
|
style="height:60%; margin-top: 30%" |
||||
|
:src="item.idView" |
||||
|
fit="fit"></el-image> |
||||
|
<div class="cold-storage-content-tips" style="top: 210px; left: 0;"> |
||||
|
<span class="cold-storage-content-tips-text">密封腔湿度{{ m9Msg.humidity }}</span> |
||||
|
<span class="cold-storage-content-tips-line blue" style="width: 20px;"></span> |
||||
|
</div> |
||||
|
<div class="cold-storage-content-tips" style="top: 270px; left: 0;"> |
||||
|
<span class="cold-storage-content-tips-text">液氮上限 195mm</span> |
||||
|
<span class="cold-storage-content-tips-line red"></span> |
||||
|
</div> |
||||
|
<div class="cold-storage-content-tips" style="top: 340px; left: 0"> |
||||
|
<span class="cold-storage-content-tips-text">液氮下限 125mm</span> |
||||
|
<span class="cold-storage-content-tips-line red"></span> |
||||
|
</div> |
||||
|
<div class="cold-storage-content-tips" style="top: 210px; right: -10%;"> |
||||
|
<span class="cold-storage-content-tips-line blue"></span> |
||||
|
<span class="cold-storage-content-tips-text">{{m9Msg.top}}</span> |
||||
|
</div> |
||||
|
<div class="cold-storage-content-tips" style="top: 270px; right: -10%;"> |
||||
|
<span class="cold-storage-content-tips-line blue"></span> |
||||
|
<span class="cold-storage-content-tips-text">{{m9Msg.center}}</span> |
||||
|
</div> |
||||
|
<div class="cold-storage-content-tips" style="top: 340px; right: -10%;"> |
||||
|
<span class="cold-storage-content-tips-line blue"></span> |
||||
|
<span class="cold-storage-content-tips-text">{{m9Msg.bottom}}</span> |
||||
|
</div> |
||||
|
<div> |
||||
|
<span>液氮高度：{{ item.height }} mm</span> |
||||
|
<span style="margin-left: 60px;" class="">转运区：<span :style="{color: item.status === 0?'red':'green'}">{{item.status === 0?'无桶':'有桶'}}</span></span> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="15" class="cta-full-img-box"> |
||||
|
<h4>造血干细胞</h4> |
||||
|
<p style="margin-bottom: 30px;" class="text-light-muted">广东省东莞市松山湖园区科技二路宏远新智汇1栋</p> |
||||
|
<p style="text-align: left;">操作记录</p> |
||||
|
<el-table :data="tableData" style="width: 100%" height="260" stripe> |
||||
|
<el-table-column type="index" label="序号" width="60" /> |
||||
|
<el-table-column prop="type" label="类型" /> |
||||
|
<el-table-column prop="operator" label="操作员" /> |
||||
|
<el-table-column prop="time" label="操作时间" /> |
||||
|
</el-table> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
</el-carousel-item> |
||||
|
</el-carousel> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
<!-- <template #footer> |
||||
|
<div style="flex: auto"> |
||||
|
<el-button @click="closeDrawer">cancel</el-button> |
||||
|
<el-button type="primary" @click="confirmClick">confirm</el-button> |
||||
|
</div> |
||||
|
</template> --> |
||||
|
</el-drawer> |
||||
|
</template> |
||||
|
<script lang="ts" setup name="customerInfo"> |
||||
|
import { ref, reactive, computed } from 'vue' |
||||
|
import { ElMessageBox, } from 'element-plus' |
||||
|
import { House, CloseBold } from '@element-plus/icons-vue' |
||||
|
import type { DrawerProps } from 'element-plus' |
||||
|
import imgUrl from '/@/assets/M9.png' |
||||
|
const props = defineProps({ |
||||
|
title: String, |
||||
|
}); |
||||
|
const tableData = [ |
||||
|
{type: '取出', operator: '黄志峰', time: '2024-07-22 15:30'}, |
||||
|
{type: '取出', operator: '黄志峰', time: '2024-07-22 15:30'}, |
||||
|
{type: '取出', operator: '黄志峰', time: '2024-07-22 15:30'}, |
||||
|
{type: '取出', operator: '黄志峰', time: '2024-07-22 15:30'}, |
||||
|
{type: '取出', operator: '黄志峰', time: '2024-07-22 15:30'}, |
||||
|
{type: '取出', operator: '黄志峰', time: '2024-07-22 15:30'}, |
||||
|
{type: '取出', operator: '黄志峰', time: '2024-07-22 15:30'}, |
||||
|
{type: '取出', operator: '黄志峰', time: '2024-07-22 15:30'}, |
||||
|
]; |
||||
|
const drawer = ref(false) |
||||
|
const direction = ref<DrawerProps['direction']>('rtl') |
||||
|
const radio1 = ref('Option 1') |
||||
|
const emits = defineEmits(['handleQuery']); |
||||
|
let random = ref(0); |
||||
|
const state = reactive({ |
||||
|
ruleForm: {} as any, |
||||
|
className: "", |
||||
|
images: [ |
||||
|
{id: 0, idView: imgUrl, top: '-180.1℃', center: '-192.2℃', bottom: '-195.1℃', shi: '1%',height: 162, status: 0}, |
||||
|
{id: 1, idView: imgUrl, top: '-181.6℃', center: '-190.6℃', bottom: '-195.3℃', shi: '1.3%',height: 166, status: 1}, |
||||
|
{id: 2, idView: imgUrl, top: '-182.4℃', center: '-192.4℃', bottom: '-195.5℃', shi: '2.1%',height: 162, status: 1}, |
||||
|
{id: 3, idView: imgUrl, top: '-183.1℃', center: '-191.5℃', bottom: '-195.6℃', shi: '1.7%',height: 168, status: 0}, |
||||
|
{id: 4, idView: imgUrl, top: '-180.9℃', center: '-190.2℃', bottom: '-195.3℃', shi: '3.1%',height: 166, status: 1}, |
||||
|
{id: 5, idView: imgUrl, top: '-182.2℃', center: '-192.9℃', bottom: '-195.4℃', shi: '2.3%',height: 169, status: 0}, |
||||
|
], |
||||
|
}); |
||||
|
const m9Msg = computed(() => { |
||||
|
return { |
||||
|
humidity: (random.value + 10).toFixed(1), |
||||
|
top: (random.value + 183.1).toFixed(1), |
||||
|
center: (random.value + 192.2).toFixed(1), |
||||
|
bottom: (random.value + 194.5).toFixed(1), |
||||
|
}; |
||||
|
}); |
||||
|
// 打开弹窗 |
||||
|
const openDrawer = (row: any) => { |
||||
|
state.ruleForm = JSON.parse(JSON.stringify(row)); |
||||
|
drawer.value = true; |
||||
|
// ruleFormRef.value?.resetFields(); |
||||
|
}; |
||||
|
|
||||
|
// 关闭弹窗 |
||||
|
const closeDrawer = () => { |
||||
|
// emits('handleQuery'); |
||||
|
drawer.value = false; |
||||
|
}; |
||||
|
const changeImg = () => { |
||||
|
state.className = "lun-img-two"; |
||||
|
setTimeout(() => { |
||||
|
state.className = "lun-img"; |
||||
|
}, 300); |
||||
|
} |
||||
|
// 取消 |
||||
|
const cancel = () => { |
||||
|
drawer.value = false; |
||||
|
}; |
||||
|
function confirmClick() { |
||||
|
ElMessageBox.confirm(`Are you confirm to chose ${radio1.value} ?`) |
||||
|
.then(() => { |
||||
|
drawer.value = false |
||||
|
}) |
||||
|
.catch(() => { |
||||
|
// catch error |
||||
|
}) |
||||
|
} |
||||
|
// 导出对象 |
||||
|
defineExpose({ openDrawer }); |
||||
|
</script> |
||||
|
<style> |
||||
|
.cursor-info .el-drawer__header { |
||||
|
display: none; |
||||
|
} |
||||
|
.cursor-info .el-drawer__body { |
||||
|
background: #f8f9fa; |
||||
|
} |
||||
|
</style> |
||||
|
<style scoped lang="scss"> |
||||
|
.orido_tm_hero { |
||||
|
width: 100%; |
||||
|
height: 100vh; |
||||
|
position: relative; |
||||
|
background-size: cover; |
||||
|
background-position: center center; |
||||
|
background-image: url(/@/assets/customer/bg.png); |
||||
|
background-color: #fff; |
||||
|
.close-box { |
||||
|
position: fixed; |
||||
|
top: 30px; |
||||
|
right: 30px; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
border-radius: 50%; |
||||
|
text-align: center; |
||||
|
box-shadow: -0.0625rem 0 .625rem 0 rgba(0, 0, 0, 0.07), 0.3125rem 1.25rem 2.5rem 0 rgba(0, 0, 0, 0.04); |
||||
|
background: #eee; |
||||
|
z-index: 1; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.info-close { |
||||
|
font-size: 30px; |
||||
|
margin-top: 5px; |
||||
|
color: #777; |
||||
|
} |
||||
|
.title-heading { |
||||
|
position: absolute; |
||||
|
left: 0; |
||||
|
top: 50%; |
||||
|
transform: translateY(-50%); |
||||
|
max-width: 60%; |
||||
|
.alert { |
||||
|
border-radius: 30px; |
||||
|
display: inline-block; |
||||
|
background: #fff; |
||||
|
box-shadow: 0 0 3px rgba(60, 72, 88, 0.15); |
||||
|
padding: 8px 15px; |
||||
|
font-size: 14px; |
||||
|
.badge { |
||||
|
border-radius: 12px; |
||||
|
background-color: var(--el-color-primary); |
||||
|
margin-right: .25rem; |
||||
|
display: inline-block; |
||||
|
padding: .35em .65em; |
||||
|
font-size: .75em; |
||||
|
font-weight: 700; |
||||
|
line-height: 1; |
||||
|
color: #fff; |
||||
|
text-align: center; |
||||
|
white-space: nowrap; |
||||
|
vertical-align: baseline; |
||||
|
} |
||||
|
.content { |
||||
|
font-size: 14px; |
||||
|
line-height: 26px; |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
} |
||||
|
.heading { |
||||
|
margin-bottom: .5rem; |
||||
|
font-size: 57px; |
||||
|
letter-spacing: -0.5px; |
||||
|
line-height: 1.2; |
||||
|
color: #161c2d; |
||||
|
} |
||||
|
.hero-btn { |
||||
|
padding-top: .5rem; |
||||
|
margin-top: 1.5rem; |
||||
|
} |
||||
|
} |
||||
|
.author { |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
right: 30px; |
||||
|
width: 35%; |
||||
|
|
||||
|
} |
||||
|
.svg { |
||||
|
position: absolute; |
||||
|
top: 50%; |
||||
|
left: 50%; |
||||
|
transform: translate(-50%, -50%); |
||||
|
width: 25px; |
||||
|
height: 25px; |
||||
|
margin-top: 2px; |
||||
|
margin-left: 2px; |
||||
|
} |
||||
|
.anim_circle{ |
||||
|
width: 150px; |
||||
|
width: 150px; |
||||
|
animation: animCircle 15s infinite linear; |
||||
|
} |
||||
|
.video_button { |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
right: 0; |
||||
|
} |
||||
|
} |
||||
|
.info-icon { |
||||
|
color: var(--el-color-primary); |
||||
|
} |
||||
|
.pera-title { |
||||
|
color: #8492a6; |
||||
|
font-size: 15px; |
||||
|
margin-bottom: 1rem; |
||||
|
line-height: 26px; |
||||
|
} |
||||
|
.section { |
||||
|
padding-top: 100px; |
||||
|
padding-bottom: 100px; |
||||
|
position: relative; |
||||
|
} |
||||
|
.content-box { |
||||
|
display: flex; |
||||
|
flex-wrap: wrap; |
||||
|
.content-item { |
||||
|
padding: .5rem 0.75rem 0; |
||||
|
margin-top: 1.5rem; |
||||
|
width: 33%; |
||||
|
.feature-widget { |
||||
|
padding: 30px 45px; |
||||
|
background-color: #fff; |
||||
|
box-shadow: -0.0625rem 0 .625rem 0 rgba(0, 0, 0, 0.07), 0.3125rem 1.25rem 2.5rem 0 rgba(0, 0, 0, 0.04); |
||||
|
border-radius: 10px; |
||||
|
h3 { |
||||
|
font-size: 20px; |
||||
|
margin-bottom: 1rem; |
||||
|
} |
||||
|
p{ |
||||
|
margin-bottom: .1rem; |
||||
|
span{ |
||||
|
font-size: 1.4rem; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.text-light-muted { |
||||
|
color: #8492a6; |
||||
|
} |
||||
|
.container-title { |
||||
|
text-align: center; |
||||
|
margin-bottom: 2rem; |
||||
|
h2 { |
||||
|
color: #161c2d; |
||||
|
font-weight: 600; |
||||
|
font-size: 30px; |
||||
|
margin-bottom: 1.5rem; |
||||
|
line-height: 1.5; |
||||
|
} |
||||
|
} |
||||
|
@keyframes animCircle { |
||||
|
0% { |
||||
|
transform: rotate(0deg); |
||||
|
} |
||||
|
100% { |
||||
|
transform: rotate(-360deg); |
||||
|
} |
||||
|
} |
||||
|
.container { |
||||
|
max-width: 1130px; |
||||
|
margin: 0px auto; |
||||
|
height: 100%; |
||||
|
position: relative; |
||||
|
} |
||||
|
.device-box { |
||||
|
background: #fff; |
||||
|
.lun-img { |
||||
|
transition: all 4s; |
||||
|
transform: scale(1.5); |
||||
|
} |
||||
|
.lun-img-two { |
||||
|
transform: scale(1); |
||||
|
} |
||||
|
.el-carousel__item.is-animating { |
||||
|
transition: transform 1s ease-in-out; |
||||
|
} |
||||
|
&-item { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
flex-wrap: wrap; |
||||
|
align-content: center; |
||||
|
height: 100%; |
||||
|
.cold-storage-content { |
||||
|
width: 400px; |
||||
|
height: 100%; |
||||
|
text-align: center; |
||||
|
position: relative; |
||||
|
&-tips { |
||||
|
position: absolute; |
||||
|
white-space: nowrap; |
||||
|
min-width: 140px; |
||||
|
width: 30%; |
||||
|
text-align: left; |
||||
|
&-line { |
||||
|
display: inline-block; |
||||
|
margin: 0 10px; |
||||
|
width: 30%; |
||||
|
margin-bottom: 3px; |
||||
|
} |
||||
|
.blue { |
||||
|
background: blue; |
||||
|
height: 5px; |
||||
|
} |
||||
|
.red { |
||||
|
background: red; |
||||
|
height: 2px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.cta-full-img-box { |
||||
|
padding: 100px 5% 100px 15%; |
||||
|
text-align: center; |
||||
|
h4{ |
||||
|
color: #161c2d; |
||||
|
font-weight: 600; |
||||
|
font-size: 30px; |
||||
|
margin-bottom: 1.5rem; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -1,14 +1,396 @@ |
|||||
<template> |
<template> |
||||
<div class="home-box"> |
<div class="home-box"> |
||||
<iframe src="http://365.robot365.cn/#/monitorScreen/scada-1" |
<!-- <iframe src="http://365.robot365.cn/#/monitorScreen/scada-1" |
||||
style="height: 100%;" frameborder="0"></iframe> |
style="height: 100%;" frameborder="0"></iframe> --> |
||||
|
<!-- <h1 class="title">松山湖基地M9_01号生命安全库</h1> --> |
||||
|
<el-row :style="{height: height+'px'}" style="margin-left: 30px;overflow: hidden;"> |
||||
|
<el-col :span="16" style="position: relative;"> |
||||
|
<div class="linebox"> |
||||
|
<img class="line1" src="/@/assets/home/lines1.png"> |
||||
|
<img class="line2" src="/@/assets/home/lines2.png"> |
||||
|
<img class="line3" src="/@/assets/home/lines3.png"> |
||||
|
</div> |
||||
|
<div id='mapDom' @click="dialogShow"> |
||||
|
<el-image width="100%" src="/@/assets/M9_01.png" alt="" /> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
<el-col :span="8" class="right-area"> |
||||
|
<h1 class="title">松山湖M9_01号生命安全库</h1> |
||||
|
<h3>设备状态监控<b></b></h3> |
||||
|
<div class="area-inbox-1"> |
||||
|
<dl> |
||||
|
<dt>上月平均值</dt> |
||||
|
<dd class="font12"><span>66.525%</span><b></b></dd> |
||||
|
<dt class="ml-20">今日使用率</dt> |
||||
|
<dd class="font-red ml-20"><span>74.113%</span><b></b></dd> |
||||
|
<dt>使用率环比增长</dt> |
||||
|
<dd><span>28.113%</span><b></b></dd> |
||||
|
</dl> |
||||
|
<div class="round-1"></div> |
||||
|
<div class="round-2"></div> |
||||
|
<div class="round-3">92%</div> |
||||
|
<div class="round-4"></div> |
||||
|
</div> |
||||
|
<div class="area-inbox-2"> |
||||
|
<ul :style="{height: (height-400)+'px'}"> |
||||
|
<li> |
||||
|
<b class="animation-2"></b> |
||||
|
<p>密封腔湿度</p> |
||||
|
<strong>14.6%</strong> |
||||
|
</li> |
||||
|
<li> |
||||
|
<b class="animation-2"></b> |
||||
|
<p>腔内顶部温度</p> |
||||
|
<strong>-183.2℃</strong> |
||||
|
</li> |
||||
|
<li> |
||||
|
<b class="animation-2"></b> |
||||
|
<p>腔内中部温度</p> |
||||
|
<strong>-192.3℃</strong> |
||||
|
</li> |
||||
|
<li> |
||||
|
<b class="animation-2"></b> |
||||
|
<p>腔内底部温度</p> |
||||
|
<strong>-194.5℃</strong> |
||||
|
</li> |
||||
|
<li> |
||||
|
<b class="animation-2"></b> |
||||
|
<p>液氮高度</p> |
||||
|
<strong>175.3mm</strong> |
||||
|
</li> |
||||
|
<li> |
||||
|
<b class="animation-2"></b> |
||||
|
<p>液氮上限</p> |
||||
|
<strong>195mm</strong> |
||||
|
</li> |
||||
|
<li> |
||||
|
<b class="animation-2"></b> |
||||
|
<p>液氮下限</p> |
||||
|
<strong>125mm</strong> |
||||
|
</li> |
||||
|
<li> |
||||
|
<b class="animation-2"></b> |
||||
|
<p>已用冻存盒</p> |
||||
|
<strong>286</strong> |
||||
|
</li> |
||||
|
<li> |
||||
|
<b class="animation-2"></b> |
||||
|
<p>总冻存盒</p> |
||||
|
<strong>312</strong> |
||||
|
</li> |
||||
|
<li> |
||||
|
<b class="animation-2"></b> |
||||
|
<p>使用率</p> |
||||
|
<strong>91.2%</strong> |
||||
|
</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-dialog v-model="dialogVisible" class="health-dialog" :title="state.title" width="800"> |
||||
|
<el-input ref="searchInput" v-if="!state.show" @keyup.enter.native="nameSearch" |
||||
|
v-model="input" style="font-size: 25px; height: 50px;"> |
||||
|
<template #append> |
||||
|
<el-button :icon="Search" @click="nameSearch" style="height: 50px;font-size: 25px;" /> |
||||
|
</template> |
||||
|
</el-input> |
||||
|
<iframe src="/@/assets/pdf/ten.pdf" v-else style="width: 100%; height: 80vh;" frameborder="0"></iframe> |
||||
|
</el-dialog> |
||||
</div> |
</div> |
||||
</template> |
</template> |
||||
|
|
||||
<script lang="ts" setup name="M9home"> |
<script lang="ts" setup name="M9home"> |
||||
|
import { onMounted, reactive, ref } from 'vue'; |
||||
|
import { ElMessage } from 'element-plus'; |
||||
|
import { Search } from '@element-plus/icons-vue' |
||||
|
const searchInput = ref(null); |
||||
|
let height = ref(0); |
||||
|
const input = ref('') |
||||
|
const dialogVisible = ref(false) |
||||
|
const state = reactive({ |
||||
|
loading: false, |
||||
|
title: '请输入要查询的用户姓名', |
||||
|
angle: 0, |
||||
|
show: false, |
||||
|
editUserTitle: '', |
||||
|
}); |
||||
|
onMounted(async () => { |
||||
|
height.value = window.innerHeight - 130; |
||||
|
// init(); |
||||
|
}); |
||||
|
const nameSearch = () => { |
||||
|
if (!input.value) { |
||||
|
ElMessage.warning('请输入要查询的用户姓名'); |
||||
|
return; |
||||
|
} |
||||
|
state.title = `${input.value} 的体检报告`; |
||||
|
state.show = true; |
||||
|
} |
||||
|
const dialogShow = async () => { |
||||
|
input.value = ''; |
||||
|
state.show = false; |
||||
|
state.title = '请输入要查询的用户姓名'; |
||||
|
// searchInput.value.focus(); |
||||
|
dialogVisible.value = true; |
||||
|
setTimeout(() => { |
||||
|
searchInput.value.focus(); |
||||
|
}, 200); |
||||
|
} |
||||
</script> |
</script> |
||||
|
<style lang="scss"> |
||||
|
.home-box .el-card__body { |
||||
|
height: 100%; |
||||
|
} |
||||
|
.health-dialog{ |
||||
|
background-color: rgba(11,11,40,0.8); |
||||
|
.el-dialog__header { |
||||
|
background: transparent; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
<style scoped lang="scss"> |
||||
|
$color: rgb(211, 130, 50); |
||||
|
#mapDom { |
||||
|
width: 45%; |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
top: 54%; |
||||
|
transform: translate(-50%, -50%); |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.area-box { |
||||
|
height: 100%; |
||||
|
overflow-y: auto; |
||||
|
padding-right: 10px; |
||||
|
border: 1px solid #666; |
||||
|
border-radius: 15px; |
||||
|
background: rgba(255,255,255, .1); |
||||
|
&::-webkit-scrollbar { |
||||
|
display: none; /* Chrome Safari */ |
||||
|
} |
||||
|
} |
||||
|
.home-box:before, |
||||
|
.home-box::after { |
||||
|
display: block; |
||||
|
content: ''; |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
top: 0; |
||||
|
pointer-events: none; |
||||
|
z-index: 10; |
||||
|
} |
||||
|
.home-box { |
||||
|
background: url(/@/assets/home/eath.png) center center; |
||||
|
background-size: 100% 100%; |
||||
|
} |
||||
|
.title { |
||||
|
font-size: 26px; |
||||
|
margin-top: 10px; |
||||
|
color: #fff; |
||||
|
} |
||||
|
@keyframes scales1{0%{transform:rotate(0)} |
||||
|
100%{transform:rotate(360deg)} |
||||
|
} |
||||
|
@keyframes scales2{0%{transform:rotate(0)} |
||||
|
100%{transform:rotate(-360deg)} |
||||
|
} |
||||
|
.linebox { |
||||
|
position: absolute; |
||||
|
width: 80%; |
||||
|
height: 80%; |
||||
|
padding-top: 20%; |
||||
|
margin-left: 10%; |
||||
|
//padding-top: 250px; |
||||
|
transform: scale(1, .7); |
||||
|
opacity: .5; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
img { |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
max-width: unset; |
||||
|
} |
||||
|
|
||||
|
.line1 { |
||||
|
animation: scales2 60s linear infinite; |
||||
|
margin-left: -3px; |
||||
|
margin-top: -7px; |
||||
|
} |
||||
|
.line2 { |
||||
|
animation: scales1 15s linear infinite; |
||||
|
} |
||||
|
.line3 { |
||||
|
animation: scales2 20s linear infinite; |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
<style scoped lang="scss">.home-box{ |
<style scoped lang="scss">.home-box{ |
||||
height: 100%; |
height: 100%; |
||||
} |
} |
||||
|
@font-face{font-family:electronicFont;src:url(/@/assets/font/DS-DIGIT.TTF)} |
||||
|
@-webkit-keyframes forotate{ |
||||
|
from{ |
||||
|
-webkit-transform:rotate(-360deg); |
||||
|
opacity: .9; |
||||
|
} |
||||
|
to{ |
||||
|
-webkit-transform:rotate(0); |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@-webkit-keyframes forotate1{ |
||||
|
from{ |
||||
|
-webkit-transform:rotate(0); |
||||
|
} |
||||
|
to{ |
||||
|
-webkit-transform:rotate(-180deg); |
||||
|
} |
||||
|
} |
||||
|
@-webkit-keyframes whitePulse { |
||||
|
from { |
||||
|
box-shadow: 0 0 26px #fff, |
||||
|
0 0 4px #fff, |
||||
|
0 0 2px #fff, |
||||
|
0 0 0px #fff; |
||||
|
|
||||
|
} |
||||
|
to { |
||||
|
box-shadow: 0 0 0 #fff, |
||||
|
0 0 2px #fff, |
||||
|
0 0 4px #fff, |
||||
|
0 0 26px #fff; |
||||
|
} |
||||
|
} |
||||
|
.right-area{ |
||||
|
position: relative; |
||||
|
color: #fff; |
||||
|
} |
||||
|
.right-area h3 { |
||||
|
position: relative; |
||||
|
top: 20px; |
||||
|
padding-bottom: 6px; |
||||
|
padding-left: 6px; |
||||
|
font-size: 14px; |
||||
|
font-weight: normal; |
||||
|
} |
||||
|
.area-inbox-1 { |
||||
|
width: 293px; |
||||
|
height: 293px; |
||||
|
background: url(/@/assets/home/bg01rightarea.png) right bottom no-repeat; |
||||
|
background-size: 100%; |
||||
|
margin-left: 60px; |
||||
|
position: relative; |
||||
|
dl { |
||||
|
padding: 105px 0 0 130px; |
||||
|
dt { |
||||
|
color: rgba(255, 255, 255, .3); |
||||
|
margin-top: 4px; |
||||
|
} |
||||
|
font12 { |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
} |
||||
|
.round-1 { |
||||
|
position: absolute; |
||||
|
left: 94px; |
||||
|
top: 98px; |
||||
|
width: 168px; |
||||
|
height: 168px; |
||||
|
border-radius: 100%; |
||||
|
border: 1px dashed #fff; |
||||
|
-webkit-animation-iteration-count: infinite; |
||||
|
-webkit-animation-name: forotate; |
||||
|
-webkit-animation-duration: 19000ms; |
||||
|
} |
||||
|
.round-2 { |
||||
|
position: absolute; |
||||
|
left: 79px; |
||||
|
top: 84px; |
||||
|
width: 198px; |
||||
|
height: 198px; |
||||
|
border-radius: 100%; |
||||
|
border: 1px dashed rgba(255, 255, 255, 0.5); |
||||
|
-webkit-animation-iteration-count: infinite; |
||||
|
-webkit-animation-name: forotate1; |
||||
|
-webkit-animation-duration: 8000ms; |
||||
|
} |
||||
|
|
||||
|
.round-3 { |
||||
|
position: absolute; |
||||
|
left: 30px; |
||||
|
top: 43px; |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
border: 1px solid rgba(255, 255, 255, .8); |
||||
|
text-align: center; |
||||
|
line-height: 40px; |
||||
|
font-family: 'electronicFont'; |
||||
|
font-size: 14px; |
||||
|
border-radius: 100%; |
||||
|
background: url(../images/bg05rightarea.png) right bottom no-repeat; |
||||
|
-webkit-animation-iteration-count: infinite; |
||||
|
-webkit-animation-name: whitePulse; |
||||
|
-webkit-animation-duration: 2s; |
||||
|
} |
||||
|
} |
||||
|
.area-inbox-1 dl dd span { |
||||
|
font-family: 'electronicFont'; |
||||
|
position: relative; |
||||
|
z-index: 1; |
||||
|
font-size: 22px; |
||||
|
margin-top: 6px; |
||||
|
letter-spacing: 1px; |
||||
|
opacity: 1; |
||||
|
} |
||||
|
.area-inbox-1 dl dd.font-red { |
||||
|
color: #ff3114; |
||||
|
} |
||||
|
.area-inbox-2 |
||||
|
{ |
||||
|
ul { |
||||
|
width: 500px; |
||||
|
margin-top: 20px; |
||||
|
overflow-y: auto; |
||||
|
&::-webkit-scrollbar { |
||||
|
display: none; /* Chrome Safari */ |
||||
|
} |
||||
|
} |
||||
|
li { |
||||
|
transition: all 0.1s ease; |
||||
|
cursor: pointer; |
||||
|
position: relative; |
||||
|
display: inline-block; |
||||
|
overflow: hidden; |
||||
|
width: 146px; |
||||
|
height: 55px; |
||||
|
padding: 10px 0 0 30px; |
||||
|
background: url(/@/assets/home/bg01bigindex.png) 0 0 no-repeat; |
||||
|
margin: 15px 0 0 40px; |
||||
|
} |
||||
|
.animation-2 { |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
top: 1px; |
||||
|
height: 16px; |
||||
|
width: 15px; |
||||
|
background: url(/@/assets/home/bg02bigindex.png) 0 0 no-repeat; |
||||
|
} |
||||
|
p { |
||||
|
display: block; |
||||
|
color: #b8b9bb; |
||||
|
font-size: 12px; |
||||
|
} |
||||
|
strong { |
||||
|
display: block; |
||||
|
color: #fff; |
||||
|
font-family: 'electronicFont'; |
||||
|
font-size: 22px; |
||||
|
font-weight: normal; |
||||
|
} |
||||
|
} |
||||
|
|
||||
</style> |
</style> |
||||
|
Before Width: | Height: | Size: 1.4 MiB After Width: | Height: | Size: 199 KiB |
|
Before Width: | Height: | Size: 2.2 MiB After Width: | Height: | Size: 355 KiB |
|
Before Width: | Height: | Size: 1.0 MiB After Width: | Height: | Size: 242 KiB |
|
Before Width: | Height: | Size: 736 KiB After Width: | Height: | Size: 130 KiB |
|
Before Width: | Height: | Size: 7.0 MiB |
|
Before Width: | Height: | Size: 1009 KiB After Width: | Height: | Size: 192 KiB |
|
Before Width: | Height: | Size: 854 KiB |
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 230 KiB |
|
Before Width: | Height: | Size: 620 KiB After Width: | Height: | Size: 111 KiB |
|
Before Width: | Height: | Size: 721 KiB After Width: | Height: | Size: 284 KiB |
Loading…
Reference in new issue