'完成首页'

app.json

@@ -1,6 +1,7 @@
 
 {
     "pages": [
+        "pages/index/index",
         "pages/myInfo/myInfo",
         "pages/receivedInvitation/receivedInvitation",
         "pages/sendInvitation/sendInvitation",
@@ -13,8 +14,7 @@
         "pages/stuDetail/stuDetail",
         "pages/teachDetail/teachDetail",
         "pages/teachCollectionStu/teachCollectionStu",
-        "pages/login/login",
-        "pages/index/index"
+        "pages/login/login"
     ],
     "window": {
         "backgroundTextStyle": "light",

pages/index/index.wxml

@@ -1,2 +1,129 @@
 <!--pages/index/index.wxml-->
-<text>pages/index/index.wxml</text>
+<swiper class="swWrapper" autoplay circular indicator-dots interval="2000" indicator-active-color="red">
+    <swiper-item>
+        <image class="swImg" src="../../images/zly.jpeg"></image>
+    </swiper-item>
+    <swiper-item>
+        <image class="swImg" src="../../images/zly.jpeg"></image>
+    </swiper-item>
+</swiper>
+<!-- 热门教员区域 -->
+<view>
+    <!-- 热门教员 -->
+    <view class="hotTitle">
+        <image class="hotIcon" src="../../images/hot.png"></image>
+        <view>热门教员</view>
+    </view>
+    <view class="hotTeacher">
+        <view class="teachGrade">
+            明星级
+        </view>
+        <image class="teachImg" src="../../images/zly.jpeg"></image>
+        <view class="hotTeacherText">
+            <view class="teachTitle">龙老师</view>
+            <view class="teachDistance">距你<text>xx</text>km</view>
+        </view>
+    </view>
+    <view class="hotTeacher">
+        <view class="teachGrade">
+            明星级
+        </view>
+        <image class="teachImg" src="../../images/zly.jpeg"></image>
+        <view class="hotTeacherText">
+            <view class="teachTitle">龙老师</view>
+            <view class="teachDistance">距你<text>xx</text>km</view>
+        </view>
+    </view>
+    <view class="hotTeacher">
+        <view class="teachGrade">
+            明星级
+        </view>
+        <image class="teachImg" src="../../images/zly.jpeg"></image>
+        <view class="hotTeacherText">
+            <view class="teachTitle">龙老师</view>
+            <view class="teachDistance">距你<text>xx</text>km</view>
+        </view>
+    </view>
+</view>
+<!-- 热门学员区域 -->
+<view>
+    <!-- 热门学员标题 -->
+    <view class="hotTitle">
+        <image class="hotIcon" src="../../images/hot.png"></image>
+        <view>热门学员</view>
+    </view>
+    <view class="hotStudent">
+        <view class="studentGrade">
+            明星级
+        </view>
+        <image class="studentImg" src="../../images/zly.jpeg"></image>
+        <view class="hotStudentText">
+            <view class="studentTitle">赵同学</view>
+            <view class="studentDistance">距你<text>xx</text>km</view>
+        </view>
+    </view>
+    <view class="hotTeacher">
+        <view class="studentGrade">
+            明星级
+        </view>
+        <image class="teachImg" src="../../images/zly.jpeg"></image>
+        <view class="hotTeacherText">
+            <view class="teachTitle">李同学</view>
+            <view class="studentDistance">距你<text>xx</text>km</view>
+        </view>
+    </view>
+    <view class="hotTeacher">
+        <view class="studentGrade">
+            明星级
+        </view>
+        <image class="teachImg" src="../../images/zly.jpeg"></image>
+        <view class="hotTeacherText">
+            <view class="teachTitle">龙同学</view>
+            <view class="studentDistance">距你<text>xx</text>km</view>
+        </view>
+    </view>
+</view>
+
+<!-- 攻略 -->
+<view>
+    <view class="strategy">
+        <view class="strategyTitle">攻略</view>
+        <view class="strategyMore">
+            <view>更多</view>
+            <image class="strategyImg" src="../../images/right.png"></image>
+        </view>
+    </view>
+    <view class="strategyContent">
+       <scroll-view class="strategyScroll"  enable-flex scroll-x>
+            <view class="strategyItem">
+                <image src="../../images/zly.jpeg"></image>
+            </view>
+            <view class="strategyItem">
+                <image src="../../images/zly.jpeg"></image>
+            </view>
+       </scroll-view>
+    </view>
+</view>
+<!-- 合作 -->
+<view>
+    <view class="cooperation">
+        <view class="cooperationTitle">合作</view>
+        <view class="cooperationMore">
+            <view>更多</view>
+            <image class="cooperationImg" src="../../images/right.png"></image>
+        </view>
+    </view>
+    <view class="cooperationContent">
+        <scroll-view class="cooperationScroll" enable-flex scroll-x>
+            <view class="scrollItem">
+                <image src="../../images/zly.jpeg"></image>
+            </view>
+            <view class="scrollItem">
+                <image src="../../images/zly.jpeg"></image>
+            </view>
+            <view class="scrollItem">
+                <image src="../../images/zly.jpeg"></image>
+            </view>
+       </scroll-view>
+    </view>
+</view>

pages/index/index.wxss

@@ -1 +1,168 @@
-/* pages/index/index.wxss */
+/* pages/index/index.wxss */
+
+/* 轮播图 */
+.swWrapper {
+    height: 400rpx;
+}
+
+.swImg {
+    width: 100%;
+    height: 400rpx;
+}
+
+/* 热门教员、热门学员标题 */
+.hotTitle {
+    display: flex;
+    margin-top: 20rpx;
+    justify-content: center;
+    align-items: center;
+}
+/* 热门教员、热门学员标题前后的线条 */
+.hotTitle::before {
+    content: "";
+    margin-right: 20rpx;
+    height: 1px;
+    border: none;
+    border-top: 1px solid #000;
+    flex: 1 1 0rpx;
+}
+.hotTitle::after {
+    content: "";
+    margin-left: 20rpx;
+    height: 1px;
+    border: none;
+    border-top: 1px solid #000;
+    flex: 1 1 0rpx;
+}
+/* 热门图标 */
+.hotIcon {
+    width: 40rpx;
+    height: 40rpx;
+}
+/* 热门教员、热门学员 */
+.hotTeacher,
+.hotStudent{
+    position: relative;
+    display: flex;
+    padding: 20rpx;
+    height: 160rpx;
+    align-items: center;
+}
+/* 教员、学员头像 */
+.teachImg,
+.studentImg{
+    width: 25%;
+    height: 100%;
+}
+/* 文字 */
+.hotTeacherText,
+.hotStudentText{
+    margin-left: 40rpx; 
+}
+.teachTitle,
+.teachDistance,
+.studentTitle,
+.studentDistance{
+    height: 60rpx;
+    line-height: 60rpx;
+}
+/* 距离字体颜色 */
+.teachDistance,
+.studentDistance{
+    color: red;
+}
+/* 距离的数字样式 */
+.teachDistance text,
+.studentDistance text{
+    margin-left: 20rpx;
+    margin-right: 20rpx;
+    font-weight: bold;
+}
+
+/* 明星级字样 */
+.teachGrade,
+.studentGrade{
+    position: absolute;
+    top: 0;
+    border: 1rpx solid red;
+    font-size: 26rpx;
+    border-top-right-radius: 20rpx;
+    border-bottom-right-radius: 20rpx;
+    padding: 2rpx 10rpx 2rpx 4rpx;
+    background-color: red;
+    color: white;
+    z-index: 99;
+}
+
+/* 攻略、合作 */
+.strategy,
+.cooperation{
+    display: flex;
+    margin-top: 30rpx;
+    padding: 20rpx;
+    /* background-color: greenyellow; */
+    align-items: center;
+}
+
+.strategyTitle,
+.cooperationTitle{
+    font-size: 42rpx;
+    font-weight: bold;
+    height: 60rpx;
+    line-height: 60rpx;
+}
+/* 更多 */
+.strategyMore,
+.cooperationMore{
+    display: flex;
+    align-items: center;
+    position: absolute;
+    right: 30rpx;
+    border: 1rpx solid gray;
+    padding: 2rpx 20rpx;
+    border-radius: 30rpx;
+}
+/* 箭头 */
+.strategyImg,
+.cooperationImg{
+    width: 30rpx;
+    height: 30rpx;
+}
+/* 内容区 */
+.strategyContent{
+    height: 300rpx;
+    margin-left: 20rpx;
+}
+
+/* 攻略图片 */
+.strategyScroll{
+    display: flex;
+    height: 300rpx;
+}
+.strategyItem,
+.scrollItem{
+    margin-right: 20rpx;
+}
+.strategyItem image,
+.scrollItem image{
+    height: 300rpx;
+    border-radius: 20rpx;
+}
+/* 合作区 */
+.cooperationContent{
+    height: 350rpx;
+    margin-left: 20rpx;
+}
+/* 合作图片 */
+.cooperationScroll{
+    display: flex;
+    height: 300rpx;
+}
+
+.scrollItem{
+    width: 350rpx;
+}
+.scrollItem image{
+    width: 350rpx;
+    
+}