今天给大家带来微信小程序文章内容详情页之个人简介制作设计教程，适合教育培训行业等行业。制作好以后效果图如下：
一、wxml页面代码如下：
<view class="content">
<view class="top">
<view class="top-tr">
<image src="{{trimg}}" class="top-trimg"></image>
</view>
<view class="top-info">
<view class="toin-name">姓名姓名</view>
<view class="toin-info"> 讲课风格:风趣幽默，生动形象</view>
</view>
</view>
<view class="clear"></view>
<view class="info">
<view class="in-title">个人简介</view>
<view class="in-info">简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介</view>
</view>
<view class="clear"></view>
<view class="info">
<view class="in-title">毕业院校</view>
<view class="in-info">XXX大学</view>
</view>
<view class="clear"></view>
</view>
|
二、wxss样式文件代码如下：
.top{
display:flex;
flex-direction: row;
width:90%;
height:180rpx;
padding:10rpx 10rpx;
margin:10rpx auto;
}
.top-trimg{
width:160rpx;
height:160rpx;
margin:15rpx 20rpx;
border-radius: 130rpx;
}
.top-info{
margin:15rpx 20rpx;
overflow: hidden;
font-size: 32rpx;
font-family: "微软雅黑";
color:#606060;
}
.toin-info{
line-height: 60rpx;
font-size: 28rpx;
}
.in-title{
font-size: 32rpx;
font-family: "微软雅黑";
color:#606060;
line-height: 60rpx;
padding-left:20rpx;
border-left: 10rpx solid #4ec4c8;
border-bottom: 1rpx solid #eeeeee;
}
.in-info{
font-size: 32rpx;
font-family: "微软雅黑";
color:#606060;
line-height: 60rpx;
padding:16rpx;
}
.clear{
display: flex;
flex-direction: column;
height:16rpx;
background: #eeeeee;
}
|
三、js文件代码如下：
//teacherlist.js
//获取应用实例
var app = getApp()
Page({
data: {
trimg: 'http://img.xdf.cn/TeacherIMG/2011/20110412/TCCQ09120110412170811_big.jpg'
}
})
|
.jpg)
.jpg)
