15 changed files with 321 additions and 21 deletions
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 648 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 6.7 KiB |
|
Before Width: | Height: | Size: 2.7 KiB |
@ -0,0 +1,53 @@ |
|||||
|
<style lang="less" scoped> |
||||
|
.dv-loading{ |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
background: rgba(0,0,0,0.7); |
||||
|
z-index: 99999; |
||||
|
} |
||||
|
.el-scrollbar.container:deep{ |
||||
|
transform-origin: left top; |
||||
|
|
||||
|
transform:scale(var(--p,1)); |
||||
|
height:calc(100%/var(--p,1)); |
||||
|
width:calc((100%)/var(--p,1)); |
||||
|
|
||||
|
background:#fff; |
||||
|
&>.el-scrollbar__wrap{ |
||||
|
&>.el-scrollbar__view{ |
||||
|
min-width:max-content; |
||||
|
max-width: 1920px; |
||||
|
margin: auto; |
||||
|
min-height:100%; |
||||
|
background:#f2f5fc; |
||||
|
} |
||||
|
} |
||||
|
&>.el-scrollbar__bar.is-vertical{ |
||||
|
width:10px; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
|
<template> |
||||
|
<el-scrollbar class="container" viewClass="d-content" :style="{'--p':multiple}" ref="scroll"> |
||||
|
<dv-loading v-if="loading" style="color:#fff;">加载中...</dv-loading> |
||||
|
<slot/> |
||||
|
</el-scrollbar> |
||||
|
</template> |
||||
|
<script setup> |
||||
|
import { computed, inject, ref, watch, watchEffect } from 'vue' |
||||
|
|
||||
|
var {getters}=inject("store") |
||||
|
function log(e){ |
||||
|
console.log(e,'----e--------') |
||||
|
} |
||||
|
var scroll=ref() |
||||
|
var multiple=ref(Math.min(1920,screen.availWidth)/1920) |
||||
|
var loading=computed(()=>getters['data/loading']) |
||||
|
|
||||
|
defineExpose({ |
||||
|
scroll |
||||
|
}) |
||||
|
</script> |
||||
@ -0,0 +1,75 @@ |
|||||
|
<style lang="less" scoped> |
||||
|
.dv-loading { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.dv-loading .loading-tip { |
||||
|
font-size: 15px; |
||||
|
} |
||||
|
</style> |
||||
|
<template> |
||||
|
<div class="dv-loading"> |
||||
|
<svg width="50px" height="50px"> |
||||
|
<circle |
||||
|
cx="25" |
||||
|
cy="25" |
||||
|
r="20" |
||||
|
fill="transparent" |
||||
|
stroke-width="3" |
||||
|
stroke-dasharray="31.415, 31.415" |
||||
|
stroke="#02bcfe" |
||||
|
stroke-linecap="round" |
||||
|
> |
||||
|
<animateTransform |
||||
|
attributeName="transform" |
||||
|
type="rotate" |
||||
|
values="0, 25 25;360, 25 25" |
||||
|
dur="1.5s" |
||||
|
repeatCount="indefinite" |
||||
|
/> |
||||
|
<animate |
||||
|
attributeName="stroke" |
||||
|
values="#02bcfe;#3be6cb;#02bcfe" |
||||
|
dur="3s" |
||||
|
repeatCount="indefinite" |
||||
|
/> |
||||
|
</circle> |
||||
|
|
||||
|
<circle |
||||
|
cx="25" |
||||
|
cy="25" |
||||
|
r="10" |
||||
|
fill="transparent" |
||||
|
stroke-width="3" |
||||
|
stroke-dasharray="15.7, 15.7" |
||||
|
stroke="#3be6cb" |
||||
|
stroke-linecap="round" |
||||
|
> |
||||
|
<animateTransform |
||||
|
attributeName="transform" |
||||
|
type="rotate" |
||||
|
values="360, 25 25;0, 25 25" |
||||
|
dur="1.5s" |
||||
|
repeatCount="indefinite" |
||||
|
/> |
||||
|
<animate |
||||
|
attributeName="stroke" |
||||
|
values="#3be6cb;#02bcfe;#3be6cb" |
||||
|
dur="3s" |
||||
|
repeatCount="indefinite" |
||||
|
/> |
||||
|
</circle> |
||||
|
</svg> |
||||
|
<div class="loading-tip"> |
||||
|
<slot /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
|
||||
|
</script> |
||||
@ -0,0 +1,63 @@ |
|||||
|
<style lang="less" scoped> |
||||
|
.title{ |
||||
|
justify-content: center; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
color:#333; |
||||
|
font-weight: bold; |
||||
|
font-size:30px; |
||||
|
margin:30px 0; |
||||
|
img{ |
||||
|
width:26px; |
||||
|
height:26px; |
||||
|
margin-right:10px; |
||||
|
} |
||||
|
} |
||||
|
.card{ |
||||
|
background:#fff; |
||||
|
width:1200px; |
||||
|
padding:30px; |
||||
|
border-radius: 8px; |
||||
|
margin:auto auto 100px auto; |
||||
|
} |
||||
|
</style> |
||||
|
<template> |
||||
|
<div class="title"><img src="@/assets/img/home/content_title_icon.png"/>细胞基础信息登记</div> |
||||
|
<div class="card"> |
||||
|
<el-form label-width="130px" label-position="right"> |
||||
|
<el-row> |
||||
|
<el-col :span="24"> |
||||
|
<el-form-item label="细胞编号"> |
||||
|
<el-input placeholder="请输入"/> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="24"> |
||||
|
<el-form-item label="物种(Speices)"> |
||||
|
<el-select placeholder="请选择" style="width:100%;"></el-select> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="8"> |
||||
|
<el-form-item label="细胞类型(cell type)"> |
||||
|
<el-select placeholder="请选择" style="width:100%;"></el-select> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="16"> |
||||
|
<el-form-item label-width="10px"> |
||||
|
<el-select placeholder="请选择" style="width:100%;"></el-select> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
<el-col :span="24"> |
||||
|
<el-form-item label="备注"> |
||||
|
<el-input type="textarea" style="width:100%;" v-model="demo" placeholder="请输入备注内容" :rows="3"/> |
||||
|
</el-form-item> |
||||
|
</el-col> |
||||
|
</el-row> |
||||
|
<el-button color="#0169D2" style="margin:auto;display:flex;">录入参数</el-button> |
||||
|
</el-form> |
||||
|
</div> |
||||
|
</template> |
||||
|
<script setup> |
||||
|
import { ref } from "vue"; |
||||
|
|
||||
|
var demo=ref('') |
||||
|
</script> |
||||
Loading…
Reference in new issue