保存

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

@@ -2,34 +2,41 @@
     <div class="details-p">
         <div class="tops">
             <h3>
-                <i class="el-icon-jy-word"></i>
+                <van-icon class="s20" 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 style="color:#2ABED1;font-size: 12px;line-height: 18px;">剑鱼币</p>
-                    <p style="color:#2ABED1;font-size: 18px;line-height: 26px;">500</p>
+                    <p class="p1">剑鱼币</p>
+                    <p class="p2">500</p>
                 </template>
             </van-goods-action-icon>
-            <van-goods-action-icon icon="cart-o" text="购物车" />
-            <van-goods-action-icon icon="shop-o" text="店铺" />
-            <van-goods-action-button
-                type="danger"
-                text="立即购买"
-            />
+            <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 { GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant'
+import { Icon, GoodsAction, GoodsActionIcon, GoodsActionButton } from 'vant'
 @Component({
   name: 'details-p',
   components: {
+    [Icon.name]: Icon,
     [GoodsAction.name]: GoodsAction,
     [GoodsActionIcon.name]: GoodsActionIcon,
     [GoodsActionButton.name]: GoodsActionButton
@@ -42,32 +49,113 @@ export default class extends Vue {
 
 <style lang="scss">
 .details-p {
+    @include diy-icon('word', 22, 22);
+    // @include diy-icon('jubao', 20, 20);
+    // @include diy-icon('weishoucang', 20, 20);
+    // @include diy-icon('shoucang', 20, 20);
+    .van-icon-diy-word.s20 {
+        width: 24px;
+        height: 24px;
+    }
+    box-sizing: border-box;
     .tops {
         background: #fff;
-        padding: 32px 40px;
-        border-radius: 4px;
+        padding: 24px 16px;
         h3 {
             display: flex;
             align-items: center;
-            color: #1d1d1d;
+            color: #171826;
             font-weight: 500;
-            font-size: 24px;
-            line-height: 36px;
+            font-size: 20px;
+            line-height: 30px;
             i {
                 margin-right: 8px;
             }
         }
     }
+    .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: 0 16px;
+        // 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-button {
-            padding: 8px 50px;
+        .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;
+        }
+        .van-button--default {
+            background-color: #2ABED1;
+            .van-button__text {
+                color: #fff;
+                font-size: 16px;
+            }
         }
     }
 }