肖正
2 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> |
|||
<div class="home-box"> |
|||
<iframe src="http://365.robot365.cn/#/monitorScreen/scada-1" |
|||
style="height: 100%;" frameborder="0"></iframe> |
|||
<!-- <iframe src="http://365.robot365.cn/#/monitorScreen/scada-1" |
|||
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> |
|||
</template> |
|||
|
|||
<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> |
|||
<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{ |
|||
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> |
|||
|
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