绿洲头条

src/components/product/NewsSmall.vue

@@ -0,0 +1,232 @@
+<template>
+    <router-link
+        :to="{
+            path: '/newsDetail',
+            query: {
+                id: info.id
+            }
+        }"
+        class="product"
+    >
+        <van-image :src="getImg(info.pic)" :radius="12" width="100%" height="calc(40vw - 13px)" fit="cover" />
+
+        <div class="content">
+            <div class="name van-ellipsis">{{ info.title }}</div>
+            <!-- <div class="sales-list">
+                <div class="sales">
+                    <span>绿洲头条新闻</span>
+                </div>
+            </div> -->
+            <div class="bottom">
+                <div class="miner">
+                    <span style="margin-left: 0">{{ info.subtitle }}</span>
+                </div>
+            </div>
+        </div>
+
+        <img class="bg" src="@assets/png-diwen.png" alt="" />
+        <!-- <img class="top-bg" v-if="time" src="@assets/collecbg.png" alt="" /> -->
+    </router-link>
+</template>
+
+<script>
+import product from '../../mixins/product';
+export default {
+    mixins: [product],
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
+    },
+    computed: {
+        time() {
+            if (this.info.startTime) {
+                if (this.dayjs().isSameOrBefore(this.info.startTime, 'YYYY-MM-DD HH:mm:ss')) {
+                    return this.dayjs(this.info.startTime).format('MM月DD日');
+                }
+            }
+
+            return '';
+        }
+    },
+    mounted() {
+        if (this.info.startTime) {
+            var x = this.dayjs(this.info.startTime, 'YYYY-MM-DD HH:mm:ss');
+            var y = this.dayjs();
+            let d = this.dayjs.duration(x.diff(y));
+            let day = parseInt(d.asDays());
+            if (day <= 0) {
+                this.getTime(this.info.startTime);
+            }
+        }
+    },
+    methods: {
+        likeProduct() {
+            if (!this.info.liked) {
+                this.$http.get(`/collection/${this.info.id}/like`).then(() => {
+                    this.$emit('update:info', {
+                        ...this.info,
+                        liked: true,
+                        likes: this.info.likes + 1
+                    });
+                    this.$toast.success('收藏成功');
+                });
+            } else {
+                this.$http.get(`/collection/${this.info.id}/unlike`).then(() => {
+                    this.$emit('update:info', {
+                        ...this.info,
+                        liked: false,
+                        likes: this.info.likes - 1
+                    });
+                    this.$toast.success('取消收藏');
+                });
+            }
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.product {
+    width: calc(100vw - 32px);
+    margin: 8px 16px;
+    position: relative;
+    background-color: #373B3E;
+    display: inline-block;
+    border-radius: 12px;
+    overflow: hidden;
+
+    .bg {
+        position: absolute;
+        width: 100px;
+        height: 182px;
+        right: 0;
+        bottom: 0;
+        z-index: 0;
+    }
+
+    .xianliang {
+        position: absolute;
+        top: 16px;
+        left: 16px;
+        font-size: @font1;
+        color: @prim;
+        display: flex;
+        align-items: center;
+        // border-radius: 13px !important;
+        z-index: 4;
+        padding: 0 10px !important;
+
+        img {
+            width: 18px;
+            height: 18px;
+            margin-right: 3px;
+        }
+    }
+
+    .van-image {
+        display: block;
+        position: relative;
+        z-index: 2;
+    }
+    .content {
+        padding: 10px 16px 10px;
+        .name {
+            font-size: @font2;
+            font-weight: bold;
+            color: #fff;
+            line-height: 24px;
+        }
+
+        .sales-list {
+            margin-top: 8px;
+            .flex();
+        }
+
+        .sales {
+            overflow: hidden;
+            font-size: @font1;
+            border-radius: 4px;
+
+            span {
+                padding: 0 10px;
+                line-height: 20px;
+                height: 20px;
+                display: inline-block;
+                &.sales-fir {
+                    background: @prim;
+                    color: @bg;
+                }
+                background-color: @bg3;
+                color: @prim;
+            }
+        }
+        .sales + .sales {
+            margin-left: 14px;
+        }
+
+        .bottom {
+            display: flex;
+            // margin-top: 14px;
+            align-items: center;
+
+            .miner {
+                display: flex;
+                align-items: center;
+
+                span {
+                    color: @text3;
+                    font-size: @font1;
+                    margin-left: 6px;
+                }
+            }
+
+            .price {
+                font-size: @font4;
+                color: @text0;
+                line-height: 20px;
+                font-family: OSP;
+                img {
+                    width: 8px;
+                    display: inline-block;
+                }
+            }
+        }
+    }
+
+    .text {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    .top-bg {
+        width: 100%;
+        display: block;
+        position: absolute;
+        z-index: 2;
+        top: 0;
+        left: 0;
+    }
+}
+
+.status {
+    font-size: @font2;
+    color: @text0;
+}
+.sold {
+    background-color: @bg2;
+    font-size: @font1;
+    color: @text3;
+    padding: 0 17px;
+    border-radius: 13px;
+    line-height: 24px;
+    position: absolute;
+    top: 16px;
+    left: 16px;
+    z-index: 3;
+}
+</style>

src/views/product/NewsList.vue

@@ -2,7 +2,7 @@
     <div class="page">
         <van-list class="list" v-model:loading="loading" :finished="finished" finished-text="" @load="getData">
             <template v-for="(item, index) in list" :key="index">
-                <news-large v-model:info="list[index]"></news-large>
+                <news-small v-model:info="list[index]"></news-small>
             </template>
 
             <van-empty :image="require('@assets/empty_img_asset.png')" v-if="empty" description="没有任何藏品哦~" />
@@ -12,7 +12,7 @@
 
 <script>
 import list from '../../mixins/list';
-import NewsLarge from '../../components/product/NewsLarge.vue';
+import NewsSmall from '../../components/product/NewsSmall.vue';
 
 export default {
     mixins: [list],
@@ -22,7 +22,7 @@ export default {
             url: '/news/all'
         };
     },
-    components: { NewsLarge },
+    components: { NewsSmall },
     methods: {
         beforeData() {
             return {
@@ -38,7 +38,7 @@ export default {
 
 <style lang="less" scoped>
 .page {
-    background-color: #f5f7fa;
+    background-color: #272b2e;
 }
 .list {
     padding: 8px 0;