|
|
@@ -1,36 +1,132 @@
|
|
|
<template>
|
|
|
- <view class="content">
|
|
|
- <image class="logo" src="@/static/logo.png"></image>
|
|
|
- <view class="text-area">
|
|
|
- <text class="title">小鹅通</text>
|
|
|
+ <view class="page-container">
|
|
|
+ <!-- 导航栏 -->
|
|
|
+ <view class="nav-bar">
|
|
|
+ <text class="nav-title">小鹅通</text>
|
|
|
+ <view class="nav-icons">
|
|
|
+ <view class="iconfont1 icon-sousuo icon"></view>
|
|
|
+ <view class="iconfont1 icon-rili icon"></view>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
+ <!-- 仿日历形状的框 -->
|
|
|
+ <view class="calendar-box">
|
|
|
+ <!-- 这里可以添加日历内容 -->
|
|
|
+ </view>
|
|
|
+ <!-- 中间内容 -->
|
|
|
+ <view class="content-box">
|
|
|
+ <text class="course-title">我的课程</text>
|
|
|
+ <!-- 新增椭圆形蓝色框 -->
|
|
|
+ <view class="oval-blue-box">
|
|
|
+ <text class="oval-text">更多课程</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 新增提示文字 -->
|
|
|
+ <text class="no-course-tip">找不到已购课程?</text>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
<style scoped>
|
|
|
- .content {
|
|
|
+@import '@/static/fontico/iconfont.css';
|
|
|
+ /* 页面容器 */
|
|
|
+ .page-container {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
+ height: 100vh;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 导航栏 */
|
|
|
+ .nav-bar {
|
|
|
+ display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
+ height: 100rpx;
|
|
|
+ padding: 0 30rpx;
|
|
|
+ border-bottom: 1rpx solid #eee;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 修改导航标题样式 */
|
|
|
+ .nav-title {
|
|
|
+ font-size: 48rpx; /* 加大字号 */
|
|
|
+ color: #000; /* 变为黑色 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .nav-icons {
|
|
|
+ position: absolute;
|
|
|
+ right: 30rpx;
|
|
|
+ display: flex;
|
|
|
+ gap: 30rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 修改图标样式 */
|
|
|
+ .iconfont1 {
|
|
|
+ font-size: 50rpx; /* 放大图标 */
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 仿日历形状的框 */
|
|
|
+ .calendar-box {
|
|
|
+ width: 80%; /* 可根据需求调整宽度 */
|
|
|
+ height: 150rpx; /* 缩短高度，可根据需求调整 */
|
|
|
+ margin: 20rpx auto;
|
|
|
+ border: 1rpx solid #ccc;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ flex: none; /* 移除 flex 属性，使用固定高度 */
|
|
|
}
|
|
|
|
|
|
- .logo {
|
|
|
- height: 200rpx;
|
|
|
- width: 200rpx;
|
|
|
- margin-top: 200rpx;
|
|
|
- margin-left: auto;
|
|
|
- margin-right: auto;
|
|
|
- margin-bottom: 50rpx;
|
|
|
+ /* 中间内容框 */
|
|
|
+ .content-box {
|
|
|
+ width: 90%; /* 宽度接近页面宽度 */
|
|
|
+ height: 400px; /* 高度自适应 */
|
|
|
+ background-color: #fff;
|
|
|
+ margin: 20rpx auto; /* 居中放置 */
|
|
|
+ padding: 20rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
|
|
|
+ flex: none; /* 移除 flex 属性 */
|
|
|
+ position: relative; /* 为子元素定位做准备 */
|
|
|
}
|
|
|
|
|
|
- .text-area {
|
|
|
+ /* 修改为圆角矩形样式 */
|
|
|
+ .oval-blue-box {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 12%; /* 往下移动，可根据需求调整 */
|
|
|
+ left: 50%;
|
|
|
+ height: 50px;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ background-color: transparent; /* 背景透明 */
|
|
|
+ border: 2px solid #007AFF; /* 蓝色边框 */
|
|
|
+ border-radius: 150px; /* 圆角半径，可根据需求调整 */
|
|
|
+ padding: 10px 100px; /* 左右内边距在原来 40px 的基础上加宽一倍 */
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 椭圆形框内文字样式 */
|
|
|
+ .oval-text {
|
|
|
+ color: #004AFF; /* 加深蓝色文字 */
|
|
|
+ font-size: 16px;
|
|
|
+ white-space: nowrap; /* 防止文字换行 */
|
|
|
+ }
|
|
|
+
|
|
|
+ .course-title {
|
|
|
+ font-size: 32rpx;
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
|
|
|
- .title {
|
|
|
- font-size: 36rpx;
|
|
|
- color: #8f8f94;
|
|
|
+ /* 新增提示文字样式 */
|
|
|
+ .no-course-tip {
|
|
|
+ font-size: 14px; /* 小字大小，可根据需求调整 */
|
|
|
+ color: #666; /* 文字颜色，可根据需求调整 */
|
|
|
+ text-align: center; /* 文字居中 */
|
|
|
+ margin-top: 10px; /* 与上方框的间距，可根据需求调整 */
|
|
|
}
|
|
|
</style>
|
feng_ting-ting