|
|
@@ -0,0 +1,220 @@
|
|
|
+<template>
|
|
|
+ <view>
|
|
|
+ <u-navbar title="购物车(2)"></u-navbar>
|
|
|
+ <view class="class-card" v-for="item in 2">
|
|
|
+ <!-- 单选框 -->
|
|
|
+ <label class="radio">
|
|
|
+ <radio value="" /><text></text>
|
|
|
+ </label>
|
|
|
+ <!-- 照片 -->
|
|
|
+ <view class="photo">
|
|
|
+ <img src="../../../assets/img/picture1.png" alt="">
|
|
|
+ </view>
|
|
|
+ <!-- 课程信息 -->
|
|
|
+ <view class="class-infos">
|
|
|
+ <view class="title">
|
|
|
+ <view class="class-name">
|
|
|
+ 夏奕琳中国舞初级课程
|
|
|
+ </view>
|
|
|
+ <view class="amount">
|
|
|
+ x1
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 课程标签 -->
|
|
|
+ <view class="class-tags">
|
|
|
+ <view class="item">
|
|
|
+ 初级班
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ 暑期班
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ 24节课
|
|
|
+ </view>
|
|
|
+ <view class="icon">
|
|
|
+ <u-icon name="arrow-down" color="#B3B3B3" size="10"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 价格 -->
|
|
|
+ <view class="price">
|
|
|
+ 720.00元
|
|
|
+ </view>
|
|
|
+ <view class="price-info">
|
|
|
+ 包含 报名费700.00元 水电费20.00元
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 结算 -->
|
|
|
+ <view class="settle">
|
|
|
+ <!-- 单选框 -->
|
|
|
+ <label class="radio">
|
|
|
+ <radio value="" /><text class="text">全选</text>
|
|
|
+ </label>
|
|
|
+ <!-- 总计 -->
|
|
|
+ <view class="total">
|
|
|
+ <view class="name">
|
|
|
+ 总计
|
|
|
+ </view>
|
|
|
+ <view class="price">
|
|
|
+ 720.00元
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 结算按钮 -->
|
|
|
+ <button class="settle-btn">结算</button>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
+ <ParentsTabbar :current="2" ref="tabbarMain"></ParentsTabbar>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import ParentsTabbar from '@/components/ParentsTabbar.vue'
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ ParentsTabbar
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .class-card{
|
|
|
+ margin: 24rpx;
|
|
|
+ padding: 24rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 8px;
|
|
|
+ display: flex;
|
|
|
+ // align-items: center;
|
|
|
+ // 单选框
|
|
|
+ .radio{
|
|
|
+ margin:auto 0
|
|
|
+ }
|
|
|
+ /deep/.uni-radio-input-checked{
|
|
|
+ background-color: rgba(13, 186, 199, 1) !important ;
|
|
|
+ }
|
|
|
+ /deep/.uni-radio-input{
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ }
|
|
|
+ //图片
|
|
|
+ .photo{
|
|
|
+ width: 152rpx;
|
|
|
+ height: 152rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ overflow: hidden;
|
|
|
+ margin-left:16rpx;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ img{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 课程信息
|
|
|
+ .class-infos{
|
|
|
+ margin-left: 16rpx;
|
|
|
+ flex:1;
|
|
|
+ .title{
|
|
|
+ display:flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .class-name{
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
+ .amount{
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 课程标签
|
|
|
+ .class-tags{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-top:4rpx;
|
|
|
+ .item{
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-right: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 价格
|
|
|
+ .price{
|
|
|
+ color: rgba(255, 61, 0, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ margin-top: 16rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+ .price-info{
|
|
|
+ color: rgba(119, 119, 119, 1);
|
|
|
+ font-size: 24rpx;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+ // 结算
|
|
|
+ .settle{
|
|
|
+ padding: 24rpx 32rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ position: fixed;
|
|
|
+ bottom: 110rpx;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ /deep/.uni-radio-input{
|
|
|
+ width: 32rpx;
|
|
|
+ height: 32rpx;
|
|
|
+ }
|
|
|
+ /deep/.uni-radio-input-checked{
|
|
|
+ background-color: rgba(13, 186, 199, 1) !important ;
|
|
|
+ }
|
|
|
+ .radio{
|
|
|
+ .text{
|
|
|
+ color: #777777;
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .total{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 120rpx;
|
|
|
+ .name{
|
|
|
+ color: rgba(51, 51, 51, 1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ }
|
|
|
+ .price{
|
|
|
+ color: #0DBAC7;
|
|
|
+ font-size: 36rpx;
|
|
|
+ margin-left: 8rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 结算按钮
|
|
|
+ .settle-btn{
|
|
|
+ width: 200rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ border-radius: 50px;
|
|
|
+ background-color: rgba(13, 186, 199, 1);
|
|
|
+ color: rgba(255, 255, 255, 1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ margin-left:24rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ /deep/.uni-label-pointer {
|
|
|
+
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+</style>
|
