zm/nuttyreading-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
@fawn-nine
2023-03-03 12:11:23 +08:00
commit f8e1a3015b
502 changed files with 57308 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
style/common.scss Normal file
View File

@@ -0,0 +1,29 @@
@import '@/style/mixin.scss';
view,
page,
text,
button,
image,
textarea,
scroll-view,input {
box-sizing: border-box;
}
image {
display: block;
}
button {
margin: 0;
padding: 0;
background-color: #FFFF;
}
button::after {
border: none;
}
// 主题背景色
.themeBgColor {
background-color: $themeColor;
}
// 主题字体色
.themeFontColor {
color: $themeColor !important;
}

350
style/input.scss Normal file
View File

@@ -0,0 +1,350 @@
.input_form_box {
.input_title {
font-size: 32upx;
color: #333333;
padding: 30upx;
&.required::before {
content: '*';
font-size: 28upx;
color: #f73333;
}
}
.input_box {
display: flex;
flex-wrap: wrap;
align-items: center;
padding: 0 30upx;
background-color: #fff;
&.line {
border-top: 1upx solid #f7f7f7;
}
&.btm_line {
border-bottom: 1upx solid #e5e5e5;
}
.name {
font-size: 28upx;
color: #333333;
min-width: 120upx;
flex-shrink: 0;
padding: 30upx 0;
&.required::before {
content: '*';
font-size: 28upx;
color: #f73333;
}
}
.prompt {
width: 100%;
padding-bottom: 20upx;
font-size: 28upx;
color: #999999;
transform: translateY(-10upx);
}
picker {
flex: 1;
}
}
.input_info {
padding: 30upx 0;
display: flex;
flex: 1;
align-items: center;
justify-content: flex-end;
> text {
font-size: 24upx;
color: #555555;
margin-left: 10upx;
flex-shrink: 0;
}
> view {
font-size: 28upx;
color: #333;
margin-left: 10upx;
flex-shrink: 0;
}
input {
width: 100%;
text-align: right;
font-size: 28upx;
}
button {
flex-shrink: 0;
min-width: 146upx;
padding: 0 30upx;
height: 60upx;
line-height: 60upx;
background-color: $themeColor;
border-radius: 8upx;
font-size: 24upx;
color: #ffffff;
margin-left: 20upx;
}
}
.switch {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
&::after {
content: "";
@include bis('https://qn.kemean.cn/upload/201908/05/5f85ccc4de404cafb30b15dedef41e8b', 100% 100%);
width: 108upx;
height: 58upx;
}
&.active::after {
background-image: url('https://qn.kemean.cn/upload/201908/05/eef318fa5c9f4692a1bd6ef6edd9be10');
}
}
.radio_box {
padding: 30upx 0;
flex: 1;
display: flex;
justify-content: flex-end;
view {
display: flex;
align-items: center;
font-size: 28upx;
color: #333333;
margin-left: 90upx;
&:first-child {
margin-left: 0;
}
&::before {
content: '';
width: 38upx;
height: 38upx;
margin-right: 15upx;
border: 2upx solid #eee;
border-radius: 50%;
box-sizing: border-box;
}
&.active::before {
border: 12upx solid $themeColor;
}
}
}
.select_info {
padding: 30upx 0;
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
.value {
font-size: 28upx;
color: #333;
text-align: right;
}
.select {
font-size: 28upx;
color: #ccc;
}
.head_img {
width: 100upx;
height: 100upx;
border-radius: 10upx;
}
&::after {
content: '';
@include bis('http://qn.kemean.cn/upload/202009/17/1600306951172qyyjj3hh.png', 100% 100%);
width: 12upx;
height: 20upx;
margin-left: 24upx;
flex-shrink: 0;
}
}
.time_limit_box {
width: 100%;
display: flex;
align-items: center;
margin-top: -30rpx;
.value {
flex: 1;
font-size: 28upx;
color: #333;
text-align: right;
padding: 30rpx 0;
}
.to {
font-size: 28rpx;
color: #333333;
padding: 0 30rpx;
}
.select {
flex: 1;
font-size: 28upx;
color: #ccc;
padding: 30rpx 0;
}
}
.upload_info {
width: 100%;
display: flex;
flex-wrap: wrap;
padding-bottom: 10upx;
.upload_img {
width: 200upx;
height: 200upx;
background-color: #ffffff;
border-radius: 4upx;
margin-right: 16upx;
margin-bottom: 16upx;
overflow: hidden;
position: relative;
&:nth-child(3n) {
margin-right: 0;
}
image {
width: 100%;
height: 100%;
}
.delete {
position: absolute;
top: 0upx;
right: 0upx;
width: 44upx;
height: 44upx;
background-image: url('https://qn.kemean.cn/upload/201908/05/df40b98b77fc4c42a5e0327c62975e29');
background-position: center center;
background-repeat: no-repeat;
background-size: 100% 100%;
}
&.upload {
border: none;
background-color: #f7f7f7;
background-image: url(./static/icon/ic_upload.png);
background-position: center center;
background-repeat: no-repeat;
background-size: 60% 60%;
}
}
}
.textarea_info {
width: 100%;
padding-bottom: 30upx;
font-size: 28upx;
color: #333;
textarea {
width: 100%;
height: 154upx;
font-size: 28upx;
line-height: 150%;
}
}
}
.placeholder {
color: #ccc;
}
.protocol {
margin-top: 20upx;
display: flex;
justify-content: center;
align-items: center;
font-size: 28upx;
color: #666;
text {
color: $themeColor;
}
view {
@include theme('unselected_img', './');
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
width: 34upx;
height: 34upx;
margin-right: 10upx;
&.active {
@include theme('radio_img', './');
}
}
}
.form_but {
margin-top: 80upx;
padding: 30upx;
display: flex;
justify-content: center;
button {
flex: 1;
height: 88upx;
background-color: #f0f0f0;
border-radius: 8upx;
line-height: 88upx;
font-size: 34upx;
color: #cccccc;
&.active {
@include theme("btn_bg");
color: #ffffff;
}
&::after {
border: none;
}
}
}
// -----------------------导航条-------------------------------
.cell_list {
background-color: #fff;
padding: 30upx;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1upx solid #f5f5f5;
&:active {
background-color: #f5f5f5;
}
&.interval {
margin-bottom: 20upx;
border-bottom: 0;
}
.cell_left {
font-size: 28upx;
color: #333333;
display: flex;
align-items: center;
image {
width: 30upx;
height: 30upx;
margin-right: 20upx;
}
}
.cell_right {
font-size: 28upx;
color: #333333;
display: flex;
align-items: center;
&.arrow::after {
content: '';
@include bis('./static/icon/me_lise_more.png', 100% 100%);
width: 12upx;
height: 22upx;
margin-left: 20upx;
}
image {
width: 36upx;
height: 36upx;
margin-left: 20upx;
}
}
}

106
style/mixin.scss Normal file
View File

@@ -0,0 +1,106 @@
@charset "utf-8";
//主题色
$themeColor: #54a966;
@mixin theme($type,$path:''){
@if $type == "btn_bg" {
background-image: linear-gradient(90deg, #54a966 0%, #117e4c 100%);
} @else if $type == "unselected_img" {
background-image: url($path + "static/icon/ic_gender_unselected.png");
} @else if $type == "check_img" {
background-image: url($path + "static/icon/ic_agreed.png");
} @else if $type == "radio_img" {
background-image: url($path + "static/icon/ic_gender_selected.png");
}
}
// 背景图片地址和大小
@mixin bis($url, $size: cover) {
background-image: url($url);
background-repeat: no-repeat;
background-position: center center;
background-size: $size;
}
// 头像
@mixin ic($width, $height) {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
flex-shrink: 0;
width: $width;
height: $height;
}
// 单行省略号
@mixin toe() {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}
// 多行省略号
@mixin bov($num:2) {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: $num;
-webkit-box-orient: vertical;
}
/**
* 这里是uni-app内置的常用样式变量
*
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
*
*/
/**
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
*
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
*/
/* uni.scss */
@import 'uview-ui/theme.scss';
/* 颜色变量 */
/* 主要颜色 */
$dominantHue:#54a966;//主色调 蓝
$lightBlue:#ECF3FD;//淡蓝
//背景浅灰
$bgLightGray:#f7f7f7; //浅灰
/* 文本颜色 */
$blackAll: #333333; //主文字颜色 黑
$mediumGrey: #666777;//副文字颜色 中灰
$lightGray: #a4a6bf;//副文字颜色 浅灰
$redAll:#FF5050;// 文本红色
$bleed:30upx;//屏幕左右边距
//屏幕适配数值
$barTopHeight:0; //XR系列状态栏高度
$navBoxHeight:34px; //XR系列底部 HOME 健预留高
$navHeight:65px; //底部导航栏高度
$barHeight:44px; //顶部标题栏高度
$classifyTopH:44px; //分类顶部选项卡高
$stairTop: 68px;// 一级页面头部距离
$stairTopTow: 92px;// XR系列一级页面头部距离
/* 其它颜色 */
$skeletonColor:#eaeaea; //骨架背景色 图片为加载完成的背景颜色
$rippleBg:#EEEEEE;//全局分割线颜色
$brimColor:#EAEAEA; //书架复选框颜色
$starColor:#FFB32F;//星星 黄

54
style/table.scss Normal file
View File

@@ -0,0 +1,54 @@
.table_box {
background-color: #FFFFFF;
.table_title {
padding: 0rpx 20rpx;
font-size: 30rpx;
height: 60rpx;
line-height: 60rpx;
color: #FFF;
text-align: center;
font-weight: bold;
background-color: rgba($color: $themeColor, $alpha: 1);
}
.table_head {
display: flex;
align-content: center;
background-color: rgba($color: $themeColor, $alpha: 0.35);
text {
padding: 15rpx 20rpx;
display: flex;
align-items: center;
justify-content: center;
flex: 1;
flex-shrink: 0;
font-size: 28rpx;
color: #333;
font-weight: bold;
border-right: 2rpx solid rgba($color: $themeColor, $alpha: 0.2);
&:last-child {
border-right: 0;
flex: 2;
}
}
}
.table_content {
display: flex;
align-content: center;
border-top: 2rpx solid rgba($color: $themeColor, $alpha: 0.2);
background-color: rgba($color: $themeColor, $alpha: 0.2);
text {
padding: 15rpx 20rpx;
display: flex;
align-items: center;
justify-content: center;
flex: 1;
font-size: 28rpx;
color: #999;
border-right: 2rpx solid rgba($color: $themeColor, $alpha: 0.3);
&:last-child {
border-right: 0;
flex: 2;
}
}
}
}