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