|  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <view class="list"> | 
|---|
|  |  |  | <view class="box"> | 
|---|
|  |  |  | <view class="box-border box-border1"></view> | 
|---|
|  |  |  | <view class="box-border box-border2"></view> | 
|---|
|  |  |  | <view class="box-border box-border3"></view> | 
|---|
|  |  |  | <view class="box-border box-border4"></view> | 
|---|
|  |  |  | <slot/> | 
|---|
|  |  |  | <view class="box-main"> | 
|---|
|  |  |  | <slot/> | 
|---|
|  |  |  | </view> | 
|---|
|  |  |  | </view> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | </script> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <style> | 
|---|
|  |  |  | .list { | 
|---|
|  |  |  | .box { | 
|---|
|  |  |  | width: calc(100% - 0.2vh); | 
|---|
|  |  |  | height: calc(100% - 0.2vh); | 
|---|
|  |  |  | position: relative; | 
|---|
|  |  |  | border: 0.1vh solid rgba(20, 80, 136, 1); | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | justify-content: center; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .box-main { | 
|---|
|  |  |  | width: 96%; | 
|---|
|  |  |  | height: 100%; | 
|---|
|  |  |  | /* background-color: #31c4c4; */ | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | flex-direction: column; | 
|---|
|  |  |  | justify-content: flex-start; | 
|---|
|  |  |  | align-items: flex-start; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | .box-border { | 
|---|
|  |  |  | position: absolute; | 
|---|