jy-docs/jydocs-mobile/src/views/details/details.vue

<template>
    <div class="details-p">
        <div class="tops">
            <h3>
                <van-icon class="word01" name="diy-word" />
                优化招投标市场营商环境与国企采购人主体责任、采购与招标
            </h3>
        </div>
        <div class="middles">
            <h3>摘要</h3>
            <p>优化招投标市场营商环境与国企采购人主体责任、采购与招标培训资料摘要摘要。</p>
            <div class="continue">全文共18页，<span>继续阅读<van-icon name="arrow-down" size="18" /></span></div>
        </div>
        <div class="botts">
            <div class="cont-page">

            </div>
        </div>
        <van-goods-action>
            <van-goods-action-icon class="no-icon">
                <template #default>
                    <p class="p1">剑鱼币</p>
                    <p class="p2">500</p>
                </template>
            </van-goods-action-icon>
            <van-goods-action-icon icon="diy-jubao" text="投诉举报" />
            <van-goods-action-icon icon="diy-weiguanzhu" text="收藏" />
            <van-goods-action-button text="下载文档" />
        </van-goods-action>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { Icon, GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant'
@Component({
  name: 'details-p',
  components: {
    [Icon.name]: Icon,
    [GoodsAction.name]: GoodsAction,
    [GoodsActionIcon.name]: GoodsActionIcon,
    [GoodsActionButton.name]: GoodsActionButton
  }
})
export default class extends Vue {

}
</script>

<style lang="scss" scoped>
@include diy-icon('word', 24, 24);
@include diy-icon('jubao', 20, 20);
@include diy-icon('weiguanzhu', 20, 20);
@include diy-icon('guanzhu', 20, 20);
.details-p {
    display: flex;
    flex-direction: column;
    .tops {
        display: flex;
        background: #fff;
        padding: 24px 16px;
        h3 {
            display: flex;
            flex-direction: initial;
            color: #171826;
            font-weight: 500;
            font-size: 20px;
            line-height: 30px;
            .word01 {
                display: table;
                width: 24px;
                height: 24px;
                margin-right: 6px;
            }
        }
    }
    .middles {
        padding: 16px;
        background: #fff;
        margin: 8px 0;
        h3 {
            font-size: 16px;
            line-height: 24px;
            font-weight: 500;
            color: #171826;
        }
        p {
            color: #5F5E64;
            font-size: 14px;
            line-height: 20px;
            margin-top: 8px;
        }
        .continue {
            color: #5F5E64;
            font-size: 14px;
            line-height: 20px;
            text-align: center;
            margin-top: 32px;
            span {
                color: #2ABED1;
                cursor: pointer;
                i {
                    margin-left: 4px;
                }
            }
        }
    }
    .botts {
        padding: 16px 24px;
        background: #fff;
        .cont-page {
            height: 900px;
        }
    }
    .van-goods-action {
        // height: 56px;
        padding: 8px 16px;
        box-shadow: 0px -2px 8px 0px #eee;
        display: flex;
        justify-content: space-between;
        .no-icon {
            p {
                color:#2ABED1;
            }
            .p1 {
                font-size: 12px;
                line-height: 18px;
            }
            .p2 {
                font-size: 18px;
                line-height: 26px;
            }
            .van-icon {
                display: none!important;
            }
        }
        .van-goods-action-icon:not(.no-icon) {
            font-size: 10px;
            color: #5F5E64;
        }
        .van-goods-action-button--first {
            margin-left: 0;
        }
        .van-goods-action-button--last {
            margin-right: 0;
        }
        .van-goods-action-button {
            flex: none;
        }
        .van-button--large {
            width: 165px;
            height: 40px;
        }
        ::v-deep .van-button--default {
            background-color: #2ABED1;
            .van-button__content {
                .van-button__text {
                    color: #fff;
                    font-size: 16px;
                }
            }
        }
    }
}
</style>