样式提交

App.vue

@@ -13,6 +13,7 @@
 	}
 </script>
 
-<style>
-	/*每个页面公共css */
+<style lang="scss">
+	/* 公共样式 */
+ @import '/common/styles/global/components.scss';
 </style>

common/styles/global/components.scss

@@ -0,0 +1,539 @@
+/******************** 这里存放通用组件样式 ********************/
+
+/********** uni-app基础组件 **********/
+/*** lli-button--primary ***/
+// lli-primary
+.lli-btn {
+    background-color: $uni-primary;
+	color:#ffffff;
+}
+// lli-primary-hover
+.button-hover.lli-btn{
+  background-color: $lli-btn-hover;
+  color: hsla(0,0%,100%,.6);
+}
+// lli-primary-disabled
+.lli-btn[disabled]:not([type]){
+	background-color: $lli-btn-disabled;
+	color: hsla(0,0%,100%,.6);
+}
+// lli-primary-loading
+.lli-btn[loading]{
+	background-color: $uni-primary;
+	color: hsla(0,0%,100%,.6);
+}
+
+/*** lli-button--plain ***/
+//lli-primary-plain
+.lli-btn[plain]{
+  border-color: $uni-primary;
+  color: $uni-primary;
+}
+// lli-primary-plain
+.button-hover.lli-btn[plain]{
+  border-color: $lli-btn-disabled;
+  color: $lli-btn-disabled;
+}
+// lli-primary-disabled
+.lli-btn[plain][disabled]:not([type]){
+	background-color: #f7f7f7;
+	color: rgba(0, 0, 0, 0.3);
+}
+.lli-btn[plain][loading]{
+	background-color: transparent;
+	border-color: $lli-btn-disabled;
+	color: $lli-btn-disabled;
+}
+	
+	
+/***** 项目中组件 *****/
+// view
+view{box-sizing: border-box;}
+
+// 对齐方式
+.lli-tl{text-align: left;}
+.lli-tc{text-align: center;}
+.lli-tr{text-align: right;}
+
+/*****describe:考试-单选题-组件 author: TX  date:2024-06-24*****/
+.mta-question-radio {
+  margin: 24px 20px 0 20px;
+  //max-height: calc(100vh - 160px);
+  overflow-y: auto;
+  word-break: break-word;
+  white-space: pre-wrap;
+  font-family: "PingFang SC, element-icons, Helvetica Neue, Helvetica, Hiragino Sans GB, Microsoft YaHei, 微软雅黑, Arial, sans-serif";
+  color: #333;
+  .row1-col-num{
+    flex-shrink: 0;
+  }
+  .row1 {
+    &-col {
+      display: flex;
+      justify-content: flex-start;
+      flex-direction: row;
+
+      &-num {
+        margin-right: 5px;
+      }
+    }
+  }
+
+  &__group {
+    margin: 18px 16px 0 16px;
+    &.showError {
+      .van-radio {
+        .isActive {
+          background-color: red;
+        }
+      }
+    }
+    .van-radio {
+      position: relative;
+      margin-bottom: 24px;
+      color: #666;
+      font-size: 14px;
+
+      .radio-item {
+        background-color: #fff;
+        width: 20px;
+        display: inline-block;
+        border-radius: 50%;
+        font-size: 14px;
+        line-height: 20px;
+        text-align: center;
+        border: 1px solid #ccc;
+        position: absolute;
+        top: 0px;
+        left: 0;
+      }
+
+      .van-radio__label {
+        margin-left: 30px;
+        line-height: 22px;
+
+        .radio-text {
+          text-align: justify;
+        }
+      }
+
+      .isActive {
+        color: #fff;
+        background-color: #0856e6;
+        border: none;
+      }
+    }
+
+  }
+
+  img {
+    max-width: 100%
+  }
+}
+
+/*****describe:考试-多选题-组件 author: TX  date:2024-06-24*****/
+.mta-question-checkbox {
+  margin: 24px 20px 0 20px;
+  //max-height: calc(100vh - 160px);
+  overflow-y: auto;
+  word-break: break-word;
+  color: #333;
+  .row1-col-num{
+    flex-shrink: 0;
+  }
+  .row1 {
+    &-col {
+      display: flex;
+      justify-content: flex-start;
+      flex-direction: row;
+
+      &-num {
+        margin-right: 5px;
+      }
+    }
+  }
+
+  &__group {
+    margin: 18px 16px 0 16px;
+
+    &.showError {
+      .van-checkbox {
+        .isActive {
+          background-color: red;
+        }
+      }
+    }
+
+    .van-checkbox {
+      position: relative;
+      margin-bottom: 24px;
+      color: #666;
+      font-size: 14px;
+
+      .checkbox-item {
+        background-color: #fff;
+        width: 20px;
+        display: inline-block;
+        //border-radius: 50%; //  describe: 修改bug区分单选和多选 author: Wgy date:2019-09-18
+        font-size: 14px;
+        line-height: 20px;
+        text-align: center;
+        border: 1px solid #ccc;
+        position: absolute;
+        top: 0px;
+        left: 0;
+      }
+
+      .van-checkbox__label {
+        margin-left: 30px;
+        line-height: 22px;
+
+        .radio-text {
+          text-align: justify;
+        }
+      }
+
+      .isActive {
+        color: #fff;
+        background-color: #0856e6;
+        border: none;
+      }
+    }
+  }
+
+  img {
+    max-width: 100%
+  }
+}
+
+/*****describe:考试-判断题-组件 author: TX  date:2024-06-24*****/
+.mta-question-panduan {
+  margin: 24px 20px 0 20px;
+  //max-height: calc(100vh - 160px);
+  overflow-y: auto;
+  word-break: break-word;
+  color: #333;
+  .row1-col-num{
+    flex-shrink: 0;
+  }
+
+  .row1 {
+    &-col {
+      display: flex;
+      justify-content: flex-start;
+      flex-direction: row;
+
+      &-num {
+        margin-right: 5px;
+      }
+    }
+  }
+
+  &__group {
+    /*margin-left: 5px;*/
+    margin: 18px 16px 0 16px;
+
+    &.showError {
+      .van-radio {
+        .van-radio__icon--checked .van-icon {
+          background-color: red;
+        }
+      }
+    }
+
+    .van-radio {
+      position: relative;
+      margin-bottom: 24px;
+      color: #666;
+      font-size: 14px;
+
+      .radio-item {
+        background-color: #fff;
+        width: 20px;
+        display: inline-block;
+        border-radius: 50%;
+        font-size: 14px;
+        line-height: 20px;
+        text-align: center;
+        border: 1px solid #ccc;
+        position: absolute;
+        top: 0;
+        left: 0;
+      }
+
+      .van-radio__label {
+        margin-left: 30px;
+
+        .radio-text {
+          text-align: justify;
+        }
+      }
+
+      .van-radio__icon--checked .van-icon {
+        background: #0856e6;
+        border-color:#0856e6;
+      }
+    }
+
+  }
+
+  .van-radio__icon--disabled.van-radio__icon--checked .van-icon {
+    color: #ffffff;
+    background: #0856e6;
+    border-color:#0856e6;
+  }
+
+  img {
+    max-width: 100%
+  }
+}
+
+/*****describe:考试-填空题-组件 author: TX  date:2024-06-24*****/
+.mta-question-tiankong {
+  margin: 24px 20px 0 20px;
+  text-align: justify;
+  //max-height: calc(100vh - 160px);
+  overflow-y: auto;
+  word-break: break-word;
+  color: #333;
+  .row1-col-num{
+    flex-shrink: 0;
+  }
+
+  &-wrap.showError {
+    .van-field__control {
+      color: red;
+    }
+  }
+
+  .row1 {
+    &-col {
+      display: flex;
+      justify-content: flex-start;
+      flex-direction: row;
+
+      &-num {
+        margin-right: 5px;
+      }
+
+    }
+  }
+
+  &-content {
+    line-height: 28px;
+    margin-bottom: 10px;
+  }
+
+  .mta-tiankong-input {
+    line-height: 22px;
+    box-sizing: border-box;
+    min-width: 0;
+    margin: 0;
+    padding: 0;
+    color: #323233;
+    text-align: left;
+    border: 0;
+    resize: none;
+    background: #FFF;
+    border-radius: 4px;
+    padding-left: 8px;
+  }
+
+  .noContent {
+    //background-color: @components-color;
+    border: 1px solid #ccc;
+
+
+    &::-webkit-input-placeholder {
+      color: #FFF;
+
+    }
+
+  }
+
+  img {
+    max-width: 100%
+  }
+
+  .tiankong-box {
+  }
+}
+
+/*****describe:考试-简答题-组件 author: TX  date:2024-06-24*****/
+.mta-question-jianda {
+  margin: 24px 20px 0px 20px;
+  //max-height: calc(100vh - 160px);
+  overflow-y: auto;
+  word-break: break-word;
+  color: #333;
+  .row1-col-num{
+    flex-shrink: 0;
+  }
+
+  .row1 {
+
+    &-col {
+      display: flex;
+      justify-content: flex-start;
+      flex-direction: row;
+
+      &-num {
+        margin-right: 5px;
+      }
+
+    }
+  }
+
+  .row2 {
+    margin: 16px 16px 26px 16px;
+
+    &-col {
+      .van-field {
+        border-radius: 4px;
+      }
+    }
+
+  }
+
+  .noContent {
+    //background-color: @components-color;
+    border: 1px solid #ccc;
+    .van-field__control {
+      &::-webkit-input-placeholder {
+        color: #fff;
+      }
+    }
+  }
+
+  .van-field--disabled .van-field__control, .van-field__right-icon {
+    color: #333;
+  }
+
+  img {
+    max-width: 100%
+  }
+  .upload-image {
+    .my-ul {
+      .van-icon-delete{
+        margin: 0 10px;
+      }
+    }
+    //图片最大数量提示
+    .photo-tip{
+      color: #999;
+      font-size: 10px;
+      margin: 0;
+      padding: 0;
+      width: 100%;
+    }
+    .van-button--normal{
+      margin: 16px 0;
+    }
+  }
+}
+
+/*****describe:考试-阅读题-组件 author: TX  date:2024-06-24*****/
+.mta-question-yuedu {
+  margin: 24px 20px 0px 20px;
+  //max-height: calc(100vh - 160px);
+  overflow-y: auto;
+  word-break: break-word;
+  color: #333;
+
+  // 浮层
+  .button-next-tip{
+    position: absolute;bottom:36px;right:0;pointer-events: none;
+    i{display:inline-block; border-width:10px; border-style:solid dashed dashed; border-color:#646566 transparent transparent ;font-size:0; line-height:0;right: 12px;position: absolute;}
+    p{background: #646566;color: #fff;border-radius: 10px;margin: 0;padding: 16px;width: 130px;text-align: center;}
+  }
+  // 置灰隐藏
+  .swiper-button-disabled .button-next-tip{display: none;}
+  // 关闭按钮
+  .button-next-em{width: 22px;height: 22px;position: absolute;right: 4px;top: -80px;background-image: url("../../assets/images/icons/close.svg");background-repeat: no-repeat;background-position: center;z-index: 9;}
+
+
+  .row1-col-num{
+    flex-shrink: 0;
+  }
+  .yuedu-question-row {
+    max-height: 50%;
+    overflow-y: auto;
+
+    &-num {
+      margin-right: 5px;
+      /*margin-top: 14px;*/
+    }
+
+    &-col {
+      display: flex;
+      justify-content: flex-start;
+      flex-direction: row;
+      word-break: break-all;
+      margin: 24px 20px 0 20px;
+    }
+  }
+
+  .yuedu-content-row {
+    max-height: 50%;
+
+
+    &-main {
+      width: 100%;
+      height: 100%;
+    }
+
+    &-swiper {
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+
+      .swiper-button-prev {
+        height: 20px;
+        width: 26px;
+        top: 60%
+      }
+
+      .swiper-button-next {
+        height: 20px;
+        width: 26px;
+        top: 60%
+      }
+      .swiper-button-next,.swiper-button-prev{
+        outline: none;
+        &:active,&:focus-visible,&:hover,&:focus,&:visited,&:focus-within,&:target{outline: none;}
+      }
+    }
+  }
+
+  img {
+    max-width: 100%
+  }
+}
+
+/*****音频播放器 author: TX  date:2024-06-24*****/
+.MtaBusAudioPlayerBox{
+  position: relative;
+  .st-aplayer{
+    //position: relative;
+  }
+  .audio-mask {
+    width: 30px;
+    height: 30px;
+    background: transparent;
+    z-index: 99;
+    position: absolute;
+    top: 10px;
+    right: 20px;
+  }
+}
+
+
+/*****分类组件 author: TX  date:2024-06-24*****/
+.lli-status-box{
+  display: flex;justify-content: space-around;background: #fff;
+  border-bottom:1px solid #f2f1f2;padding: 15px 10px;
+  label{text-align: center;color: #333333;position: relative;}
+  label.click:before{content: '';position: absolute;height: 2px;width: 80%;bottom: -15px;font-size: 14px;
+	background-color: $uni-primary;
+    left: 10%;border-radius: 2px;}
+}

common/styles/global/pages.scss

@@ -0,0 +1 @@
+/***** 这里存放通用页面样式 *****/

common/styles/index.scss

@@ -0,0 +1,8 @@
+// 麦塔主题颜色
+@import '/common/styles/theme/blue.scss';
+
+// 青谷主题颜色
+// @import '/common/styles/theme/green.scss';
+
+// 页面通用scss
+// @import '/common/styles/global/pages.scss';

common/styles/theme/blue.scss

@@ -0,0 +1,33 @@
+// 麦塔的主题配色
+$uni-primary: #0550e5;// 主题色
+
+// 按钮
+$lli-btn-hover:#0441b9;// 按鈕hover顏色
+$lli-btn-disabled:#6394f5;// 按鈕disabled顏色
+
+/* 行为相关颜色 */
+$uni-color-primary: #0550e5;
+$uni-color-success: #4cd964;
+$uni-color-warning: #f0ad4e;
+$uni-color-error: #dd524d;
+
+/* 文字基本颜色 */
+$uni-text-color:#333333;//基本色
+$uni-text-color-inverse:#ffffff;//反色
+$uni-text-color-grey:#999999;//辅助灰色，如加载更多的提示信息
+$uni-text-color-placeholder: #808080;
+$uni-text-color-disable:#c0c0c0;
+
+/* 背景颜色 */
+$uni-bg-color:#ffffff;
+$uni-bg-color-grey:#f8f8f8;
+$uni-bg-color-hover:#f1f1f1;//点击状态颜色
+$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
+
+/* 边框颜色 */
+$uni-border-color:#c8c7cc;
+
+/* 文章颜色 */
+$uni-color-title: #2C405A; // 文章标题颜色
+$uni-color-subtitle: #555555; // 二级标题颜色
+$uni-color-paragraph: #3F536E; // 文章段落颜色

common/styles/theme/green.scss

@@ -0,0 +1,33 @@
+// 青谷的主题配色
+$uni-primary:#17C05B;
+
+// 按钮
+$lli-btn-hover:#13af51;// 按鈕hover顏色
+$lli-btn-disabled:#9ed99d;// 按鈕disabled顏色
+
+/* 行为相关颜色 */
+$uni-color-primary: #17C05B;
+$uni-color-success: #4cd964;
+$uni-color-warning: #f0ad4e;
+$uni-color-error: #dd524d;
+
+/* 文字基本颜色 */
+$uni-text-color:#333333;//基本色
+$uni-text-color-inverse:#ffffff;//反色
+$uni-text-color-grey:#999999;//辅助灰色，如加载更多的提示信息
+$uni-text-color-placeholder: #808080;
+$uni-text-color-disable:#c0c0c0;
+
+/* 背景颜色 */
+$uni-bg-color:#ffffff;
+$uni-bg-color-grey:#f8f8f8;
+$uni-bg-color-hover:#f1f1f1;//点击状态颜色
+$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
+
+/* 边框颜色 */
+$uni-border-color:#c8c7cc;
+
+/* 文章颜色 */
+$uni-color-title: #2C405A; // 文章标题颜色
+$uni-color-subtitle: #555555; // 二级标题颜色
+$uni-color-paragraph: #3F536E; // 文章段落颜色

pages.json

@@ -16,7 +16,7 @@
 			"path" : "pages/exam/index",
 			"style" : 
 			{
-				"navigationBarTitleText" : ""
+				"navigationBarTitleText" : "考试"
 			}
 		},
 		{
@@ -25,6 +25,13 @@
 			{
 				"navigationBarTitleText" : ""
 			}
+		},
+		{
+			"path" : "pages/demo/index",
+			"style" : 
+			{
+				"navigationBarTitleText" : "demo"
+			}
 		}
 	],
 	"tabBar": {
@@ -56,7 +63,7 @@
 				"selectedIconPath": "static/images/tabbar/select/score-sj.png",
 				"text": "成绩"
 			}, {
-				"pagePath": "pages/exam/index",
+				"pagePath": "pages/demo/index",
 				"iconPath": "static/images/tabbar/unselect/my-sj.png",
 				"selectedIconPath": "static/images/tabbar/unselect/my-sj.png",
 				"text": "我的"

pages/demo/index.vue

@@ -0,0 +1,59 @@
+<template>
+	<view class="lli-demo-page">
+		<uni-search-bar class="uni-mt-10" radius="100" placeholder="请输入考试名称" bgColor="#F3F3F4" clearButton="auto" cancelButton="none" @confirm="search"/>
+		<view class="lli-status-box">
+		    <span class="click">可以考试</span><span>已结束</span>
+		</view>
+		<scroll-view class="demo-scroll-view" scroll-y="true">
+			<view class="content-view">
+				<view class="lli-tc demo-title">------------uni带的primary按钮-------------</view>
+				<button type="primary">页面主操作 Normal</button>
+				<button type="primary" loading="true">页面主操作 Loading</button>
+				<button type="primary" disabled="true">页面主操作 Disabled</button>
+				<view class="lli-tc demo-title">------------咱们要用的默认按钮↓-------------</view>
+				<button class="lli-btn">页面次要操作 Normal</button>
+				<button class="lli-btn" loading="true" >页面主操作 Loading</button>
+				<button class="lli-btn" disabled="true" >页面次要操作 Disabled</button>
+				<view class="lli-tc demo-title">---------咱们要用的按钮plain（线性）↓----------</view>
+				<button class="lli-btn" plain="true">页面次要操作 Normal</button>
+				<button class="lli-btn" loading="true" plain="true">页面主操作 Loading</button>
+				<button class="lli-btn" disabled="true" plain="true">页面次要操作 Disabled</button>
+				<view class="lli-tc demo-title">------------其他组件定义color="#0550e5"-------------</view>	
+					<checkbox-group>
+						<label>
+							<checkbox value="cb" checked="true" color="#0550e5"/>选中
+						</label>
+						<label>
+							<checkbox value="cb" />未选中
+						</label>
+					</checkbox-group>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script>
+	export default {
+		data() {
+			return {
+				
+			}
+		},
+		methods: {
+			search:function(){},
+		}
+	}
+</script>
+<style lang="scss">
+	.lli-demo-page{
+		display: flex;flex-direction: column;
+		height: 100vh;padding-bottom: 60rpx;box-sizing: border-box;
+		.demo-scroll-view{
+			overflow-y: auto;flex: 1;
+		}
+		.content-view{padding: 24px;box-sizing: border-box;}
+		.demo-title{margin: 24px 0 10px;}
+	}
+	
+</style>
+

uni.scss

@@ -1,43 +1,5 @@
-/**
- * 这里是uni-app内置的常用样式变量
- *
- * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
- * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
- *
- */
-
-/**
- * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
- *
- * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
- */
-
-/* 颜色变量 */
-
-/* 行为相关颜色 */
-$uni-color-primary: #007aff;
-$uni-color-success: #4cd964;
-$uni-color-warning: #f0ad4e;
-$uni-color-error: #dd524d;
-
-/* 文字基本颜色 */
-$uni-text-color:#333;//基本色
-$uni-text-color-inverse:#fff;//反色
-$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
-$uni-text-color-placeholder: #808080;
-$uni-text-color-disable:#c0c0c0;
-
-/* 背景颜色 */
-$uni-bg-color:#ffffff;
-$uni-bg-color-grey:#f8f8f8;
-$uni-bg-color-hover:#f1f1f1;//点击状态颜色
-$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
-
-/* 边框颜色 */
-$uni-border-color:#c8c7cc;
-
-/* 尺寸变量 */
-
+// 主题色:#0550e5
+/********** uni-ui 样式 **********/
 /* 文字尺寸 */
 $uni-font-size-sm:12px;
 $uni-font-size-base:14px;
@@ -50,14 +12,14 @@ $uni-img-size-lg:40px;
 
 /* Border Radius */
 $uni-border-radius-sm: 2px;
-$uni-border-radius-base: 3px;
+$uni-border-radius-base: 4px;
 $uni-border-radius-lg: 6px;
 $uni-border-radius-circle: 50%;
 
 /* 水平间距 */
-$uni-spacing-row-sm: 5px;
+$uni-spacing-row-sm: 6px;
 $uni-spacing-row-base: 10px;
-$uni-spacing-row-lg: 15px;
+$uni-spacing-row-lg: 16px;
 
 /* 垂直间距 */
 $uni-spacing-col-sm: 4px;
@@ -68,9 +30,8 @@ $uni-spacing-col-lg: 12px;
 $uni-opacity-disabled: 0.3; // 组件禁用态的透明度
 
 /* 文章场景相关 */
-$uni-color-title: #2C405A; // 文章标题颜色
 $uni-font-size-title:20px;
-$uni-color-subtitle: #555555; // 二级标题颜色
 $uni-font-size-subtitle:26px;
-$uni-color-paragraph: #3F536E; // 文章段落颜色
-$uni-font-size-paragraph:15px;
+$uni-font-size-paragraph:16px;
+
+@import '/common/styles/index.scss';