181 lines
3.6 KiB
Vue
181 lines
3.6 KiB
Vue
<template>
|
|
<view class='app'>
|
|
<view class="card">
|
|
<view class="toptitle">
|
|
<image src="../../static/shipin.png" mode=""></image>
|
|
<view class="title">
|
|
视频
|
|
</view>
|
|
</view>
|
|
<view class="items">
|
|
<view class="item">
|
|
<image src="../../static/jnks.png" mode=""></image>
|
|
<view class="text">
|
|
基础护理技能操作
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<image src="../../static/jnks.png" mode=""></image>
|
|
<view class="text">
|
|
基础护理技能操作
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<image src="../../static/jnks.png" mode=""></image>
|
|
<view class="text">
|
|
基础护理技能操作
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<image src="../../static/jnks.png" mode=""></image>
|
|
<view class="text">
|
|
基础护理技能操作
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="card">
|
|
<view class="toptitle">
|
|
<image src="../../static/zhibo.png" mode=""></image>
|
|
<view class="title">
|
|
直播
|
|
</view>
|
|
</view>
|
|
<view class="items">
|
|
<view class="item">
|
|
<image src="../../static/jnks.png" mode=""></image>
|
|
<view class="text">
|
|
基础护理技能操作
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<image src="../../static/jnks.png" mode=""></image>
|
|
<view class="text">
|
|
基础护理技能操作
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<image src="../../static/jnks.png" mode=""></image>
|
|
<view class="text">
|
|
基础护理技能操作
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<image src="../../static/jnks.png" mode=""></image>
|
|
<view class="text">
|
|
基础护理技能操作
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="card">
|
|
<view class="toptitle">
|
|
<image src="../../static/peixun.png" mode=""></image>
|
|
<view class="title">
|
|
培训
|
|
</view>
|
|
</view>
|
|
<view class="items">
|
|
<view class="item">
|
|
<image src="../../static/jnks.png" mode=""></image>
|
|
<view class="text">
|
|
基础护理技能操作
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<image src="../../static/jnks.png" mode=""></image>
|
|
<view class="text">
|
|
基础护理技能操作
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<image src="../../static/jnks.png" mode=""></image>
|
|
<view class="text">
|
|
基础护理技能操作
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<image src="../../static/jnks.png" mode=""></image>
|
|
<view class="text">
|
|
基础护理技能操作
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
|
|
};
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.app {
|
|
margin: 15rpx auto 0;
|
|
padding: 0 0 60rpx;
|
|
color: #000000;
|
|
|
|
.card {
|
|
width: 97%;
|
|
margin: 0 auto 15rpx;
|
|
background-color: #fff;
|
|
|
|
.items {
|
|
width: 92%;
|
|
margin: 30rpx auto 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
|
|
.item {
|
|
margin-bottom: 55rpx;
|
|
|
|
image {
|
|
width: 190rpx;
|
|
height: 190rpx;
|
|
border-radius: 5rpx;
|
|
}
|
|
|
|
.text {
|
|
width: 166rpx;
|
|
font-size: 27rpx;
|
|
font-weight: 500;
|
|
line-height: 36rpx;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.toptitle {
|
|
width: 92%;
|
|
margin: 0 auto;
|
|
position: relative;
|
|
height: 90rpx;
|
|
border-bottom: 1rpx solid #E6E6E6;
|
|
|
|
.title {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
left: 50rpx;
|
|
}
|
|
|
|
image {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
left: 0;
|
|
width: 36rpx;
|
|
height: 36rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|