hywen
/
YNUtdPlatform
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

学习详情-相关页面调整

This commit is contained in:
FrancisHu 2024-08-08 14:26:57 +08:00
parent b81be47cd7
commit bd4ce66237
4 changed files with 377 additions and 340 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
pages/YNEduApp/learnProj/learnProjDetail.vue
View File

@ -41,18 +41,39 @@
<uni-list-item <uni-list-item
v-for="(item, index) in theoryLearnList" v-for="(item, index) in theoryLearnList"
:key="item.id" :key="item.id"
title="练习" title="课程"
:note="item.title" :note="item.title"
showArrow
clickable clickable
:show-extra-icon="true"
:extra-icon="learnIconObj"
:rightText="item.percent + '%'"
@click="toggleTheoryLearn(item.id)" @click="toggleTheoryLearn(item.id)"
></uni-list-item> >
<!-- <template v-slot:footer>
<liu-progressbar
:progress="item.percent"
color="#000"
:height="'20rpx'"
bgColor="#1989FA"
:textInside="false"
/>
</template>-->
</uni-list-item>
</uni-list> </uni-list>
</uni-collapse-item> </uni-collapse-item>
<uni-collapse-item title="理论练习"> <uni-collapse-item title="理论练习">
<uni-list> <uni-list>
<uni-list-item title="练习" note="高压电取证理论学习" <uni-list-item
showArrow></uni-list-item> v-for="(item, index) in theoryPracList"
:key="item.id"
title="练习"
:note="item.title"
rightText="未练习"
clickable
:show-extra-icon="true"
:extra-icon="pracIconObj"
@click="toggleTheoryPrac(item.id)"
></uni-list-item>
</uni-list> </uni-list>
</uni-collapse-item> </uni-collapse-item>
<uni-collapse-item title="理论模拟考试"> <uni-collapse-item title="理论模拟考试">
@ -70,7 +91,7 @@
</uni-collapse> </uni-collapse>
</view> </view>
<view class="comment-area"> <view class="comment-area">
<h2 style="margin-bottom: 15rpx">最新评论</h2> <h2 style="margin-bottom: 15rpx">最新评论 ({{ commentList.length }})</h2>
<view class="write-cmt"> <view class="write-cmt">
<uni-icons style="color: #9B9B9B; margin-right: 1vw" type="compose" size="12"></uni-icons> <uni-icons style="color: #9B9B9B; margin-right: 1vw" type="compose" size="12"></uni-icons>
写评论 写评论
@ -106,19 +127,20 @@
</template> </template>
<script> <script>
import bindIngXMixins from "../../../uni_modules/uni-swipe-action/components/uni-swipe-action-item/bindingx";
export default { export default {
computed: {
bindIngXMixins() {
return bindIngXMixins
}
},
data() { data() {
return { return {
projId: '', projId: '',
starRate: 5, starRate: 5,
learnIconObj: { color: '#1A63AC',size: '18', type: 'calendar' },
pracIconObj: { color: '#38B022',size: '18', type: 'compose' },
theoryLearnList: [ theoryLearnList: [
{ title: '高压电', id: 121, percent: 86 },
{ title: '氨基酸', id: 122, percent: 42 },
{ title: '维他命', id: 123, percent: 66 },
{ title: '电功率', id: 124, percent: 13 },
],
theoryPracList: [
{ title: '母猪的产后护理', id: 141 }, { title: '母猪的产后护理', id: 141 },
{ title: '公猪的情绪安抚', id: 142 }, { title: '公猪的情绪安抚', id: 142 },
{ title: '母狗的二三情事', id: 143 }, { title: '母狗的二三情事', id: 143 },
@ -134,7 +156,10 @@
methods: { methods: {
toggleTheoryLearn(id) { toggleTheoryLearn(id) {
console.log(id) console.log(id)
} },
toggleTheoryPrac(id) {
console.log(id)
},
}, },
onLoad(params) { onLoad(params) {
this.projId = params.id this.projId = params.id
@ -157,7 +182,7 @@
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
padding: 30rpx 15rpx; padding: 30rpx 20rpx;
background-color: #fff; background-color: #fff;
border-radius: 20rpx; border-radius: 20rpx;
display: flex; display: flex;
@ -224,15 +249,6 @@
} }
.rig-dn{
display: flex;
align-items: center;
box-sizing: border-box;
padding-left: 1vw;
}
} }
} }
@ -259,7 +275,7 @@
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
margin: 1vh auto; margin: 1vh auto;
padding: 30rpx 15rpx 5vh 15rpx; padding: 30rpx 20rpx 5vh 20rpx;
background-color: #fff; background-color: #fff;
border-radius: 20rpx; border-radius: 20rpx;
display: flex; display: flex;

8
pages/YNEduApp/user/user.vue
View File

@ -88,12 +88,13 @@
width: 100%; width: 100%;
height: 10vh; height: 10vh;
display: flex; display: flex;
align-items: center;
margin-bottom: 3vh; margin-bottom: 3vh;
.user-avatar{ .user-avatar{
width: 25%; width: 8vh;
height: 100%; height: 8vh;
border-radius: 50%; border-radius: 50%;
overflow: hidden; overflow: hidden;
@ -126,9 +127,10 @@
view{ view{
width: 100%; width: 100%;
height: 35%;
background: linear-gradient(90deg, #6DCDFA, #4BA2F9); background: linear-gradient(90deg, #6DCDFA, #4BA2F9);
color: #fff; color: #fff;
box-sizing: border-box;
padding: 10rpx 0;
margin: auto; margin: auto;
border-radius: 20px; border-radius: 20px;
display: flex; display: flex;

601
unpackage/dist/dev/app-plus/app-service.js vendored
View File

File diff suppressed because one or more lines are too long

42
unpackage/dist/dev/app-plus/app-view.js vendored
View File

@ -14069,7 +14069,7 @@ if(false) {}
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ./node_modules/css-loader/dist/runtime/api.js */ 13); var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ./node_modules/css-loader/dist/runtime/api.js */ 13);
exports = ___CSS_LOADER_API_IMPORT___(false); exports = ___CSS_LOADER_API_IMPORT___(false);
// Module // Module
exports.push([module.i, "@charset \"UTF-8\";\n/**\n * 这里是uni-app内置的常用样式变量\n *\n * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量\n * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App\n *\n */\n/**\n * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能\n *\n * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件\n */\n/* 颜色变量 */\n/* 行为相关颜色 */\n/* 文字基本颜色 */\n/* 背景颜色 */\n/* 边框颜色 */\n/* 尺寸变量 */\n/* 文字尺寸 */\n/* 图片尺寸 */\n/* Border Radius */\n/* 水平间距 */\n/* 垂直间距 */\n/* 透明度 */\n/* 文章场景相关 */\n.page {\n width: 100vw;\n height: 100vh;\n background: linear-gradient(#EAF0F7, #F8F8F8);\n box-sizing: border-box;\n padding: 15vh 8vw;\n}\n.page .user-edit {\n width: 100%;\n height: 10vh;\n display: flex;\n margin-bottom: 3vh;\n}\n.page .user-edit .user-avatar {\n width: 25%;\n height: 100%;\n border-radius: 50%;\n overflow: hidden;\n}\n.page .user-edit .user-avatar uni-image {\n width: 100%;\n height: 100%;\n}\n.page .user-edit .user-info {\n width: 50%;\n height: 100%;\n box-sizing: border-box;\n padding: 5%;\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n}\n.page .user-edit .edit-btn {\n flex: 1;\n display: flex;\n}\n.page .user-edit .edit-btn uni-view {\n width: 100%;\n height: 35%;\n background: linear-gradient(90deg, #6DCDFA, #4BA2F9);\n color: #fff;\n margin: auto;\n border-radius: 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 12px;\n}\n.page .learn-infos {\n width: 100%;\n height: 12vh;\n background: #fff;\n border-radius: 15rpx;\n box-shadow: #F1F1F2 2px 2px;\n display: flex;\n justify-content: space-around;\n align-items: center;\n margin-bottom: 2vh;\n}\n.page .learn-infos uni-view {\n width: 25%;\n height: 50%;\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n align-items: center;\n}\n.page .learn-infos uni-view span:first-child {\n font-size: 20px;\n font-weight: bold;\n}\n.page .learn-infos uni-view span:last-child {\n font-size: 12px;\n color: #767676;\n}\n.page .secs {\n width: 100%;\n background-color: #fff;\n border-radius: 15rpx;\n box-sizing: border-box;\n padding: 4vh 3vw;\n color: #727272;\n}\n.page .secs .single-sec {\n width: 100%;\n box-sizing: border-box;\n padding: 10px 0;\n font-size: 14px;\n display: flex;\n align-items: center;\n border-bottom: 1px solid #F6F6F6;\n}\n.page .secs .single-sec .lef-icon {\n width: 5%;\n height: 2vh;\n}\n.page .secs .single-sec .lef-icon uni-image {\n width: 100%;\n height: 100%;\n}\n", ""]); exports.push([module.i, "@charset \"UTF-8\";\n/**\n * 这里是uni-app内置的常用样式变量\n *\n * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量\n * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App\n *\n */\n/**\n * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能\n *\n * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件\n */\n/* 颜色变量 */\n/* 行为相关颜色 */\n/* 文字基本颜色 */\n/* 背景颜色 */\n/* 边框颜色 */\n/* 尺寸变量 */\n/* 文字尺寸 */\n/* 图片尺寸 */\n/* Border Radius */\n/* 水平间距 */\n/* 垂直间距 */\n/* 透明度 */\n/* 文章场景相关 */\n.page {\n width: 100vw;\n height: 100vh;\n background: linear-gradient(#EAF0F7, #F8F8F8);\n box-sizing: border-box;\n padding: 15vh 8vw;\n}\n.page .user-edit {\n width: 100%;\n height: 10vh;\n display: flex;\n align-items: center;\n margin-bottom: 3vh;\n}\n.page .user-edit .user-avatar {\n width: 8vh;\n height: 8vh;\n border-radius: 50%;\n overflow: hidden;\n}\n.page .user-edit .user-avatar uni-image {\n width: 100%;\n height: 100%;\n}\n.page .user-edit .user-info {\n width: 50%;\n height: 100%;\n box-sizing: border-box;\n padding: 5%;\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n}\n.page .user-edit .edit-btn {\n flex: 1;\n display: flex;\n}\n.page .user-edit .edit-btn uni-view {\n width: 100%;\n background: linear-gradient(90deg, #6DCDFA, #4BA2F9);\n color: #fff;\n box-sizing: border-box;\n padding: 10rpx 0;\n margin: auto;\n border-radius: 20px;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 12px;\n}\n.page .learn-infos {\n width: 100%;\n height: 12vh;\n background: #fff;\n border-radius: 15rpx;\n box-shadow: #F1F1F2 2px 2px;\n display: flex;\n justify-content: space-around;\n align-items: center;\n margin-bottom: 2vh;\n}\n.page .learn-infos uni-view {\n width: 25%;\n height: 50%;\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n align-items: center;\n}\n.page .learn-infos uni-view span:first-child {\n font-size: 20px;\n font-weight: bold;\n}\n.page .learn-infos uni-view span:last-child {\n font-size: 12px;\n color: #767676;\n}\n.page .secs {\n width: 100%;\n background-color: #fff;\n border-radius: 15rpx;\n box-sizing: border-box;\n padding: 4vh 3vw;\n color: #727272;\n}\n.page .secs .single-sec {\n width: 100%;\n box-sizing: border-box;\n padding: 10px 0;\n font-size: 14px;\n display: flex;\n align-items: center;\n border-bottom: 1px solid #F6F6F6;\n}\n.page .secs .single-sec .lef-icon {\n width: 5%;\n height: 2vh;\n}\n.page .secs .single-sec .lef-icon uni-image {\n width: 100%;\n height: 100%;\n}\n", ""]);
// Exports // Exports
module.exports = exports; module.exports = exports;
@ -16645,7 +16645,17 @@ var render = function () {
_c( _c(
"uni-list", "uni-list",
{ attrs: { _i: 27 } }, { attrs: { _i: 27 } },
[_c("uni-list-item", { attrs: { _i: 28 } })], _vm._l(_vm._$g(28, "f"), function (item, index, $21, $31) {
return _c("uni-list-item", {
key: item,
attrs: { _i: "28-" + $31 },
on: {
click: function ($event) {
return _vm.$handleViewEvent($event)
},
},
})
}),
1 1
), ),
], ],
@ -16690,7 +16700,7 @@ var render = function () {
_c( _c(
"h2", "h2",
{ staticStyle: { "margin-bottom": "15rpx" }, attrs: { _i: 36 } }, { staticStyle: { "margin-bottom": "15rpx" }, attrs: { _i: 36 } },
[_vm._v("最新评论")] [_vm._v("最新评论 (" + _vm._$g(36, "t0-0") + ")")]
), ),
_c( _c(
"uni-view", "uni-view",
@ -16704,30 +16714,30 @@ var render = function () {
], ],
1 1
), ),
_vm._l(_vm._$g(39, "f"), function (item, index, $21, $31) { _vm._l(_vm._$g(39, "f"), function (item, index, $22, $32) {
return _c( return _c(
"uni-view", "uni-view",
{ {
key: item, key: item,
staticClass: _vm._$g("39-" + $31, "sc"), staticClass: _vm._$g("39-" + $32, "sc"),
attrs: { _i: "39-" + $31 }, attrs: { _i: "39-" + $32 },
}, },
[ [
_c( _c(
"uni-view", "uni-view",
{ {
staticClass: _vm._$g("40-" + $31, "sc"), staticClass: _vm._$g("40-" + $32, "sc"),
attrs: { _i: "40-" + $31 }, attrs: { _i: "40-" + $32 },
}, },
[ [
_c("v-uni-image", { _c("v-uni-image", {
attrs: { attrs: {
src: _vm._$g("41-" + $31, "a-src"), src: _vm._$g("41-" + $32, "a-src"),
_i: "41-" + $31, _i: "41-" + $32,
}, },
}), }),
_c("span", { attrs: { _i: "42-" + $31 } }, [ _c("span", { attrs: { _i: "42-" + $32 } }, [
_vm._v(_vm._$g("42-" + $31, "t0-0")), _vm._v(_vm._$g("42-" + $32, "t0-0")),
]), ]),
], ],
1 1
@ -16735,10 +16745,10 @@ var render = function () {
_c( _c(
"uni-view", "uni-view",
{ {
staticClass: _vm._$g("43-" + $31, "sc"), staticClass: _vm._$g("43-" + $32, "sc"),
attrs: { _i: "43-" + $31 }, attrs: { _i: "43-" + $32 },
}, },
[_vm._v(_vm._$g("43-" + $31, "t0-0"))] [_vm._v(_vm._$g("43-" + $32, "t0-0"))]
), ),
], ],
1 1
@ -18137,7 +18147,7 @@ if(false) {}
var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ./node_modules/css-loader/dist/runtime/api.js */ 13); var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(/*! ./node_modules/css-loader/dist/runtime/api.js */ 13);
exports = ___CSS_LOADER_API_IMPORT___(false); exports = ___CSS_LOADER_API_IMPORT___(false);
// Module // Module
exports.push([module.i, "@charset \"UTF-8\";\n/**\n * 这里是uni-app内置的常用样式变量\n *\n * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量\n * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App\n *\n */\n/**\n * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能\n *\n * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件\n */\n/* 颜色变量 */\n/* 行为相关颜色 */\n/* 文字基本颜色 */\n/* 背景颜色 */\n/* 边框颜色 */\n/* 尺寸变量 */\n/* 文字尺寸 */\n/* 图片尺寸 */\n/* Border Radius */\n/* 水平间距 */\n/* 垂直间距 */\n/* 透明度 */\n/* 文章场景相关 */\n.page {\n width: 100vw;\n background-color: #f8f8f8;\n box-sizing: border-box;\n padding: 5vw;\n position: relative;\n}\n.page .proj-cont {\n width: 100%;\n box-sizing: border-box;\n padding: 30rpx 15rpx;\n background-color: #fff;\n border-radius: 20rpx;\n display: flex;\n flex-direction: column;\n box-shadow: #F4F4F4 2px 2px;\n}\n.page .proj-cont .user-info {\n width: 100%;\n height: 8vh;\n display: flex;\n margin-top: 2vh;\n}\n.page .proj-cont .user-info .info-lef {\n width: 35%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n}\n.page .proj-cont .user-info .info-lef .avatar {\n width: 100%;\n display: flex;\n align-items: center;\n}\n.page .proj-cont .user-info .info-lef .avatar uni-image {\n width: 60rpx;\n height: 60rpx;\n border-radius: 50%;\n margin-right: 1.5vw;\n}\n.page .proj-cont .user-info .info-rig {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n box-sizing: border-box;\n color: #b0b0b0;\n}\n.page .proj-cont .user-info .info-rig .rig-up {\n display: flex;\n align-items: center;\n}\n.page .proj-cont .user-info .info-rig .rig-up uni-view span {\n padding: 0 1vw;\n}\n.page .proj-cont .user-info .info-rig .rig-dn {\n display: flex;\n align-items: center;\n box-sizing: border-box;\n padding-left: 1vw;\n}\n.page .proj-cont .tip {\n width: 100%;\n margin: 2vh auto;\n background-color: #F7F7F7;\n font-size: 12px;\n color: #9B9B9B;\n display: flex;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n padding: 25rpx 15rpx;\n}\n.page .comment-area {\n width: 100%;\n box-sizing: border-box;\n margin: 1vh auto;\n padding: 30rpx 15rpx 5vh 15rpx;\n background-color: #fff;\n border-radius: 20rpx;\n display: flex;\n flex-direction: column;\n box-shadow: #F4F4F4 2px 2px;\n}\n.page .comment-area .write-cmt {\n width: 100%;\n margin: 2vh auto;\n background-color: #F7F7F7;\n font-size: 12px;\n color: #9B9B9B;\n display: flex;\n align-items: center;\n box-sizing: border-box;\n padding: 15rpx;\n}\n.page .comment-area .cmts {\n width: 100%;\n display: flex;\n flex-direction: column;\n margin-bottom: 2vh;\n}\n.page .comment-area .cmts .cmt-up {\n display: flex;\n align-items: center;\n font-weight: bold;\n}\n.page .comment-area .cmts .cmt-up uni-image {\n width: 60rpx;\n height: 60rpx;\n border-radius: 50%;\n margin-right: 2vw;\n}\n.page .comment-area .cmts .cmt-dn {\n box-sizing: border-box;\n padding-left: calc(60rpx + 2vw);\n}\n.page .btm-sticky {\n position: fixed;\n left: 0;\n bottom: 0;\n width: 100%;\n height: 8vh;\n background-color: #fff;\n border-top: 1px solid #D8D8D8;\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-sizing: border-box;\n padding: 0 5vw;\n}\n.page .btm-sticky .icons {\n width: 40%;\n display: flex;\n justify-content: space-between;\n}\n.page .btm-sticky .icons uni-view {\n display: flex;\n align-items: center;\n}\n.page .btm-sticky .icons uni-view span {\n font-size: 16px;\n color: #1A89FA;\n font-weight: bold;\n}\n.page .btm-sticky .learn-btn {\n width: 30%;\n height: 60%;\n background-color: #1A89FA;\n color: #fff;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 14px;\n border-radius: 50rpx;\n}\n", ""]); exports.push([module.i, "@charset \"UTF-8\";\n/**\n * 这里是uni-app内置的常用样式变量\n *\n * uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量\n * 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App\n *\n */\n/**\n * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能\n *\n * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件\n */\n/* 颜色变量 */\n/* 行为相关颜色 */\n/* 文字基本颜色 */\n/* 背景颜色 */\n/* 边框颜色 */\n/* 尺寸变量 */\n/* 文字尺寸 */\n/* 图片尺寸 */\n/* Border Radius */\n/* 水平间距 */\n/* 垂直间距 */\n/* 透明度 */\n/* 文章场景相关 */\n.page {\n width: 100vw;\n background-color: #f8f8f8;\n box-sizing: border-box;\n padding: 5vw;\n position: relative;\n}\n.page .proj-cont {\n width: 100%;\n box-sizing: border-box;\n padding: 30rpx 20rpx;\n background-color: #fff;\n border-radius: 20rpx;\n display: flex;\n flex-direction: column;\n box-shadow: #F4F4F4 2px 2px;\n}\n.page .proj-cont .user-info {\n width: 100%;\n height: 8vh;\n display: flex;\n margin-top: 2vh;\n}\n.page .proj-cont .user-info .info-lef {\n width: 35%;\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n}\n.page .proj-cont .user-info .info-lef .avatar {\n width: 100%;\n display: flex;\n align-items: center;\n}\n.page .proj-cont .user-info .info-lef .avatar uni-image {\n width: 60rpx;\n height: 60rpx;\n border-radius: 50%;\n margin-right: 1.5vw;\n}\n.page .proj-cont .user-info .info-rig {\n flex: 1;\n display: flex;\n flex-direction: column;\n justify-content: space-around;\n box-sizing: border-box;\n color: #b0b0b0;\n}\n.page .proj-cont .user-info .info-rig .rig-up {\n display: flex;\n align-items: center;\n}\n.page .proj-cont .user-info .info-rig .rig-up uni-view span {\n padding: 0 1vw;\n}\n.page .proj-cont .tip {\n width: 100%;\n margin: 2vh auto;\n background-color: #F7F7F7;\n font-size: 12px;\n color: #9B9B9B;\n display: flex;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n padding: 25rpx 15rpx;\n}\n.page .comment-area {\n width: 100%;\n box-sizing: border-box;\n margin: 1vh auto;\n padding: 30rpx 20rpx 5vh 20rpx;\n background-color: #fff;\n border-radius: 20rpx;\n display: flex;\n flex-direction: column;\n box-shadow: #F4F4F4 2px 2px;\n}\n.page .comment-area .write-cmt {\n width: 100%;\n margin: 2vh auto;\n background-color: #F7F7F7;\n font-size: 12px;\n color: #9B9B9B;\n display: flex;\n align-items: center;\n box-sizing: border-box;\n padding: 15rpx;\n}\n.page .comment-area .cmts {\n width: 100%;\n display: flex;\n flex-direction: column;\n margin-bottom: 2vh;\n}\n.page .comment-area .cmts .cmt-up {\n display: flex;\n align-items: center;\n font-weight: bold;\n}\n.page .comment-area .cmts .cmt-up uni-image {\n width: 60rpx;\n height: 60rpx;\n border-radius: 50%;\n margin-right: 2vw;\n}\n.page .comment-area .cmts .cmt-dn {\n box-sizing: border-box;\n padding-left: calc(60rpx + 2vw);\n}\n.page .btm-sticky {\n position: fixed;\n left: 0;\n bottom: 0;\n width: 100%;\n height: 8vh;\n background-color: #fff;\n border-top: 1px solid #D8D8D8;\n display: flex;\n justify-content: space-between;\n align-items: center;\n box-sizing: border-box;\n padding: 0 5vw;\n}\n.page .btm-sticky .icons {\n width: 40%;\n display: flex;\n justify-content: space-between;\n}\n.page .btm-sticky .icons uni-view {\n display: flex;\n align-items: center;\n}\n.page .btm-sticky .icons uni-view span {\n font-size: 16px;\n color: #1A89FA;\n font-weight: bold;\n}\n.page .btm-sticky .learn-btn {\n width: 30%;\n height: 60%;\n background-color: #1A89FA;\n color: #fff;\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 14px;\n border-radius: 50rpx;\n}\n", ""]);
// Exports // Exports
module.exports = exports; module.exports = exports;