.

src/main/comos/package.json

@@ -29,6 +29,7 @@
         "query-string": "^7.0.1",
         "register-service-worker": "^1.7.1",
         "swiper": "^6.8.1",
+        "three": "^0.136.0",
         "v-charts": "^1.19.0",
         "vant": "^3.2.3",
         "vconsole": "^3.9.4",

src/main/comos/src/components/order/OrderInfo.vue

@@ -28,7 +28,7 @@
         <div class="total-price">
             <span class="time flex1">{{ info.payTime }}</span>
             <span>实际支付</span>
-            <span>¥{{ info.totalPrice }}</span>
+            <span class="priceColor">¥{{ info.totalPrice }}</span>
         </div>
         <!-- 
         <div class="btns">

src/main/comos/src/components/product/ProductBanner.vue

@@ -3,31 +3,28 @@
         <img src="@assets/png-bg-shangping.png" class="bg-img" />
 
         <div class="detail-info">
-            <swiper pagination class="mySwiper" v-if="banners.length > 0">
-                <swiper-slide v-for="(item, index) in banners" :key="index">
-                    <!-- <img :src="item" /> -->
-
-                    <!-- <div class="video-box" v-if="isVideo(item)">
-                        <van-icon color="#fff" size="60" name="play-circle" />
-                    </div> -->
-
-                    <video
-                        class="swiper-video"
-                        v-if="isVideo(item)"
-                        :src="item.url"
-                        controls
-                        :poster="getImg(changeImgs([item]), '', 1200)"
-                    >
-                        您的浏览器不支持 video 标签。
-                    </video>
-                    <van-image
-                        v-else
-                        @click="preview(index, changeImgs(banners))"
-                        :src="getImg(item.url, '', 1200)"
-                        width="calc(100vw - 134px)"
-                        height="calc(100vw - 134px)"
-                        fit="cover"
-                    />
+            <swiper v-if="banners.length > 0" pagination class="mySwiper" centeredSlides slidesPerView="auto">
+                <swiper-slide :class="{ 'swiper-pic': !is3D(item) }" v-for="(item, index) in banners" :key="index">
+                    <three-mode v-if="is3D(item)" :info="item"></three-mode>
+                    <div class="swiper-content">
+                        <video
+                            class="swiper-video"
+                            v-if="isVideo(item)"
+                            :src="item.url"
+                            :poster="getImg(changeImgs([item]), '', 1200)"
+                            controls="controls"
+                        >
+                            您的浏览器不支持 video 标签。
+                        </video>
+                        <van-image
+                            v-else
+                            @click="preview(index, changeImgs(banners))"
+                            :src="getImg(item.url, '', 1200)"
+                            width="calc(100vw - 134px)"
+                            height="calc(100vw - 134px)"
+                            fit="cover"
+                        />
+                    </div>
                 </swiper-slide>
             </swiper>
 
@@ -56,6 +53,9 @@ import 'swiper/swiper-bundle.min.css';
 import product from '../../mixins/product';
 import Post from '../Post.vue';
 import { ImagePreview } from 'vant';
+import ThreeMode from './ThreeMode.vue';
+// import ThreeMode from './ThreeMode.vue';
+
 export default {
     props: {
         info: {
@@ -73,7 +73,8 @@ export default {
     components: {
         Swiper,
         SwiperSlide,
-        Post
+        Post,
+        ThreeMode
     },
     computed: {
         banners() {
@@ -130,28 +131,40 @@ export default {
     position: relative;
     .detail-info {
         position: absolute;
-        top: 50%;
+        // top: 50%;
         left: 50%;
-        transform: translate(-50%, -50%);
+        transform: translate(-50%, 0);
         display: flex;
         flex-direction: column;
         align-items: center;
-        padding-bottom: 50px;
+        width: 100vw;
+        height: calc(100vw+24px);
+        top: 0px;
+    }
+    .mySwiper {
+        width: 100vw;
+        height: 100vw;
     }
     .bg-img {
         display: block;
         width: 100vw;
     }
     .mySwiper {
+        overflow: visible;
+    }
+    .swiper-pic {
+        overflow: hidden;
         border-radius: @radius;
-        border: 2px solid @swiper-border;
+        border: 2px solid #ffffff;
         padding: 5px;
+        width: calc(100vw - 124px) !important;
+        height: calc(100vw - 128px);
+        margin-top: calc(25vw - 50px);
         .detail-animate();
-        .swiper-slide {
+        .swiper-content {
             display: flex;
             align-items: center;
             justify-content: center;
-            position: relative;
             /deep/ .van-image {
                 border: 2px solid #2f2f2f;
                 border-radius: @radius;
@@ -170,7 +183,9 @@ export default {
 
 .share-content {
     display: flex;
-    margin-top: 20px;
+    // margin-top: 20px;
+    transform: translateY(-50px);
+    z-index: 20;
 }
 .share-icon {
     img {
@@ -191,19 +206,4 @@ export default {
         margin-left: 30px;
     }
 }
-
-.video-box {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    background-color: rgba(255, 255, 255, 0.5);
-    .flex();
-    justify-content: center;
-
-    .van-icon {
-        color: rgba(0, 0, 0, 0.5) !important;
-    }
-}
 </style>

src/main/comos/src/components/product/ThreeMode.vue

@@ -0,0 +1,169 @@
+<template>
+    <div class="mode">
+        <canvas ref="three"></canvas>
+    </div>
+</template>
+
+<script>
+import * as THREE from 'three';
+import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
+export default {
+    props: {
+        info: {
+            type: Object,
+            default: () => {
+                return {};
+            }
+        }
+    },
+    data() {
+        return {
+            scene: null,
+            light: null,
+            camera: null,
+            renderer: null,
+            controls: null,
+            mesh: null,
+            angularSpeed: 0.2,
+            lastTime: 0,
+            farmeCount: 0
+        };
+    },
+    mounted() {
+        this.init();
+    },
+    methods: {
+        init() {
+            const scene = new THREE.Scene();
+            // scene.background = new THREE.Color('#fff');
+            const canvas = this.$refs.three;
+            const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
+            const camera = new THREE.PerspectiveCamera(45, canvas.innerWidth / canvas.innerHeight, 0.1, 1000);
+            renderer.setSize(canvas.innerWidth, canvas.innerHeight);
+            camera.position.z = 150;
+            this.scene = scene;
+            this.camera = camera;
+            this.renderer = renderer;
+            const fbxLoader = new FBXLoader();
+            var mesh = null;
+            // const axesHelper = new THREE.AxesHelper(50);
+            // scene.add(axesHelper);
+            fbxLoader.load(
+                this.info.url || 'https://zhirongip.oss-cn-hangzhou.aliyuncs.com/matilda/source/sketchfab_v002.fbx',
+                fbx => {
+                    console.log(fbx);
+                    mesh = fbx;
+                    mesh.scale.multiplyScalar(0.45);
+                    // mesh.position.y = -40;
+                    // mesh.traverse(o => {
+                    //     //将图片作为纹理加载
+                    //     let explosionTexture = new THREE.TextureLoader().load(
+                    //         'https://zhirongip.oss-cn-hangzhou.aliyuncs.com/matilda/textures/color.2.1001.png'
+                    //     );
+                    //     //调整纹理图的方向
+                    //     explosionTexture.flipY = true;
+                    //     //将纹理图生成基础网格材质(MeshBasicMaterial)
+                    //     const material = new THREE.MeshBasicMaterial({
+                    //         map: explosionTexture
+                    //     });
+                    //     //给模型每部分上材质
+                    //     o.material = material;
+                    // });
+                    scene.add(fbx);
+                }
+            );
+            // const controls = new OrbitControls(camera, renderer.domElement);
+            // controls.enableDamping = true;
+            const clock = new THREE.Clock();
+            function animate() {
+                // controls.update();
+                renderer.render(scene, camera);
+                requestAnimationFrame(animate);
+
+                const time = Date.now() * 0.0005;
+                const delta = clock.getDelta();
+
+                if (mesh) mesh.rotation.y -= 0.5 * delta;
+
+                //添加下面代码
+                if (resizeRendererToDisplaySize(renderer)) {
+                    const canvas = renderer.domElement;
+                    camera.aspect = canvas.clientWidth / canvas.clientHeight;
+                    camera.updateProjectionMatrix();
+                }
+            }
+            animate();
+
+            function resizeRendererToDisplaySize(renderer) {
+                const canvas = renderer.domElement;
+                var width = window.innerWidth;
+                var height = window.innerHeight;
+                var canvasPixelWidth = canvas.width / window.devicePixelRatio;
+                var canvasPixelHeight = canvas.height / window.devicePixelRatio;
+
+                const needResize = canvasPixelWidth !== width || canvasPixelHeight !== height;
+                if (needResize) {
+                    renderer.setSize(width, height, false);
+                }
+                return needResize;
+            }
+        },
+        rorateAnimate() {}
+        // init() {
+        //     this.scene = new THREE.Scene();
+        //     this.scene.add(new THREE.AmbientLight(0x404040, 6)); //环境光
+        //     this.light = new THREE.DirectionalLight(0xdfebff, 0.45); //从正上方（不是位置）照射过来的平行光，0.45的强度
+        //     this.light.position.set(50, 200, 100);
+        //     this.light.position.multiplyScalar(0.3);
+        //     this.scene.add(this.light);
+        //     /**
+        //      * 相机设置
+        //      */
+        //     let container = this.$refs.three; //显示3D模型的容器
+        //     this.camera = new THREE.PerspectiveCamera(70, container.clientWidth / container.clientHeight, 0.01, 10);
+        //     this.camera.position.z = 1;
+        //     /**
+        //      * 创建渲染器对象
+        //      */
+        //     this.renderer = new THREE.WebGLRenderer({ alpha: true });
+        //     this.renderer.setSize(container.clientWidth, container.clientHeight);
+        //     container.appendChild(this.renderer.domElement);
+        //     //创建控件对象
+        //     this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+        // },
+        // loadFbx() {
+        //     let self = this;
+        //     let fbxLoader = new FBXLoader();
+        //     //load一个测试模型路径：public/model/zhuozi2.gltf
+        //     fbxLoader.load('https://zhirongip.oss-cn-hangzhou.aliyuncs.com/cs_xong.FBX', function (fbx) {
+        //         self.isLoading = false; //关闭载入中效果
+        //         self.mesh = fbx;
+        //         // self.mesh.scale.set(0.4, 0.4, 0.4); //设置大小比例
+        //         // self.mesh.position.set(0, 0, 0); //设置位置
+        //         self.scene.add(self.mesh); // 将模型引入three、
+        //         self.animate();
+        //     });
+        // },
+        // animate() {
+        //     if (this.mesh) {
+        //         requestAnimationFrame(this.animate);
+
+        //         // this.mesh.rotation.x += 0.01;
+        //         this.mesh.rotation.y += 0.004;
+        //         this.renderer.render(this.scene, this.camera);
+        //     }
+        // }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.mode {
+    canvas {
+        width: 100vw;
+        height: 100vw;
+    }
+}
+</style>

src/main/comos/src/mixins/product.js

@@ -1,5 +1,13 @@
+import dayjs from 'dayjs';
 import { abs } from 'mathjs';
-import { differenceInSeconds } from 'date-fns';
+require('dayjs/locale/zh-cn');
+dayjs.locale('zh-cn');
+var relativeTime = require('dayjs/plugin/relativeTime');
+dayjs.extend(relativeTime);
+var calendar = require('dayjs/plugin/calendar');
+dayjs.extend(calendar);
+var duration = require('dayjs/plugin/duration');
+dayjs.extend(duration);
 export default {
     data() {
         return {
@@ -50,7 +58,7 @@ export default {
         },
         isAppointment() {
             if (this.info.startTime) {
-                return this.dayjs().isBefore(this.dayjs(this.info.startTime));
+                return dayjs().isBefore(dayjs(this.info.startTime));
             } else {
                 return false;
             }
@@ -63,7 +71,7 @@ export default {
         changeImgs(list = []) {
             // console.log(list);
             return list.map(item => {
-                if (item.type === 'video/mp4') {
+                if (item.type === 'video/mp4' || item.type === 'model3d') {
                     return item.thumb;
                 } else {
                     return item.url;
@@ -73,6 +81,9 @@ export default {
         isVideo(info = {}) {
             return info.type === 'video/mp4';
         },
+        is3D(info = {}) {
+            return info.type === 'model3d';
+        },
         getTime(startTime) {
             if (!startTime) {
                 return;
@@ -80,27 +91,21 @@ export default {
             if (!this.isAppointment) {
                 return;
             }
-
-            let seconds = differenceInSeconds(new Date(startTime), new Date());
-            console.log(seconds);
+            var x = dayjs(startTime);
+            var y = dayjs();
+            let d = dayjs.duration(x.diff(y));
+            let day = parseInt(d.asDays());
             let str = '';
-            let d = Math.floor(seconds / 24 / 3600);
-            if (abs(d) > 0) {
-                str += d + '天 ';
+            if (abs(day) > 0) {
+                str += day + '天 ';
             }
+            this.startTime = str + dayjs.duration(x.diff(y)).format('HH:mm:ss');
 
-            this.startTime =
-                str +
-                this.getCutNum((seconds % 24) / 3600) +
-                ':' +
-                this.getCutNum((seconds % 3600) / 60) +
-                ':' +
-                this.getCutNum((seconds % 3600) % 60);
             if (this.timer) {
                 clearTimeout(this.timer);
                 this.timer = null;
             }
-            if (!this.dayjs().isBefore(this.dayjs(startTime, 'YYYY-MM-DD HH:mm:ss'))) {
+            if (!dayjs().isBefore(dayjs(startTime))) {
                 if (this.getProduct) {
                     this.getProduct();
                 }
@@ -111,42 +116,11 @@ export default {
                 }, 1000);
             }
         },
-        getCutNum(num = 0) {
-            num = Math.floor(num);
-            if (num < 10) {
-                return '0' + num;
-            } else {
-                return num;
-            }
-        },
         getShort(str = '') {
             if (str) {
                 str = '...' + str.substr(-8, 8);
             }
             return str;
-        },
-        clearTime() {
-            if (this.timer) {
-                clearTimeout(this.timer);
-                this.timer = null;
-            }
-        },
-        updateTime() {
-            if (this.startTime) {
-                this.getTime(this.info.startTime);
-            }
-        }
-    },
-    deactivated() {
-        this.clearTime();
-    },
-    activated() {
-        this.updateTime();
-    },
-    beforeUnmount() {
-        if (this.timer) {
-            clearTimeout(this.timer);
-            this.timer = null;
         }
     }
 };

src/main/comos/src/styles/common/common.less

@@ -6,6 +6,9 @@
     display: flex;
     flex-direction: column;
 }
+.priceColor {
+    color: @priceColor!important;
+}
 .line(@bg: #1c1e26, @radius: 6px, @color1: @prim, @color2: @warn) {
     background-image: linear-gradient(135deg, @color1, @color2);
     position: relative;

src/main/comos/src/styles/common/theme.less

@@ -24,9 +24,9 @@
 @menu-bg-active: #1f2d3d;
 @menu-bg-hover: #232e3b;
 @background-color-light: #181818;
-@font1: 12px;
-@font2: 14px;
-@font3: 16px;
+@font1: 14px;
+@font2: 16px;
+@font3: 18px;
 @font4: 20px;
 @hotBg: #f5f7fa;
 @btnText: #fff;

src/main/comos/src/views/Home.vue

@@ -25,7 +25,7 @@
             </swiper-slide>
         </swiper>
 
-        <page-title title="热门推荐"></page-title>
+        <page-title title="热门推荐" :isLink="false"></page-title>
         <div class="list">
             <product-large
                 v-for="(item, index) in products"
@@ -231,6 +231,7 @@ export default {
 
 .list {
     padding: 0 0 100px;
+    transform: translateY(-11px);
 }
 
 .welcom {

src/main/comos/src/views/Index.vue

@@ -12,11 +12,12 @@
             safe-area-inset-bottom
             route
             ref="tabbar"
+            active-color="#26273C"
         >
             <van-tabbar-item replace v-for="item in menus" :name="item.name" :to="`/${item.name}`" :key="item.name">
                 <span>{{ item.title }}</span>
                 <template #icon="props">
-                    <img :src="props.active ? item.preIcon : item.icon" />
+                    <img class="tab-icon" :src="props.active ? item.preIcon : item.icon" />
                 </template>
             </van-tabbar-item>
         </van-tabbar>
@@ -90,4 +91,12 @@ export default {
         }
     }
 }
+/deep/.van-tabbar-item__icon {
+    margin-bottom: 7px;
+}
+
+.tab-icon {
+    width: 20px;
+    height: 20px;
+}
 </style>

src/main/comos/src/views/Mine.vue

@@ -307,9 +307,9 @@ export default {
         justify-content: center;
         border-radius: 8px;
         img {
-            width: 32px;
-            height: 32px;
-            margin-right: 12px;
+            width: 28px;
+            height: 28px;
+            margin-right: 17px;
         }
         span {
             font-size: @font2;

src/main/comos/src/views/Submit.vue

@@ -16,11 +16,11 @@
             <div class="list">
                 <div class="info">
                     <div class="text1">作品费用</div>
-                    <div class="text2">¥{{ iosPrice || info.price }}</div>
+                    <div class="text2 priceColor">¥{{ iosPrice || info.price }}</div>
                 </div>
                 <div class="info">
                     <div class="text1">GAS费用</div>
-                    <div class="text2">¥{{ iosPrice ? 0 : gas }}</div>
+                    <div class="text2 priceColor">¥{{ iosPrice ? 0 : gas }}</div>
                 </div>
                 <div v-if="couponList.length > 0" class="info" :class="{ not: !couponInfo }" @click="goCoupon">
                     <div class="text1">藏品兑换券</div>
@@ -565,7 +565,7 @@ export default {
             font-size: 34px;
             font-family: OSP;
             font-weight: normal;
-            color: @prim;
+            color: @priceColor;
             line-height: 30px;
             display: flex;
             align-items: center;

src/main/comos/src/views/asset/Detail.vue

@@ -950,6 +950,7 @@ export default {
     // padding-top: 10px;
     // padding: 10px 0 0 16px;
 }
+@line-color: #9395a4;
 .goods {
     // padding: 20px 16px;
     .top1 {
@@ -965,7 +966,7 @@ export default {
         .text2 {
             width: 94px;
             height: 32px;
-            background: #9395a4;
+            background: @line-color;
             border-radius: 4px;
             margin-left: 14px;
             line-height: 30px;
@@ -1009,7 +1010,7 @@ export default {
         .text4 {
             color: @text0;
             line-height: 22px;
-            background: linear-gradient(135deg, @prim 0%, @warn 100%);
+            background: linear-gradient(135deg, @line-color 0%, @line-color 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             &.prim {
@@ -1048,7 +1049,7 @@ export default {
         width: 94px;
         height: 32px;
         color: @btnText;
-        background: linear-gradient(48deg, @prim 0%, @warn 100%);
+        background: linear-gradient(48deg, @line-color 0%, @line-color 100%);
         border-radius: 4px;
         &.prim {
             background: #202122;
@@ -1105,7 +1106,7 @@ export default {
     justify-content: center;
     flex-direction: column;
     position: relative;
-    background: linear-gradient(135deg, @prim, @warn);
+    background: linear-gradient(135deg, @line-color, @line-color);
     margin-right: 20px;
     box-sizing: border-box;
     min-width: 94px;
@@ -1181,7 +1182,7 @@ export default {
             font-weight: 500;
             color: @text3;
             line-height: 17px;
-            background: linear-gradient(135deg, @prim 0%, @warn 100%);
+            background: linear-gradient(135deg, @line-color 0%, @line-color 100%);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
         }
@@ -1195,6 +1196,12 @@ export default {
         color: @btnText;
         font-size: @font2;
         border-width: 0px;
+
+        &.btn1 {
+            background: transparent;
+            color: @prim;
+            border: 1px solid @prim;
+        }
     }
 }
 .status {

src/main/comos/src/views/order/Detail.vue

@@ -38,7 +38,9 @@
             </div>
             <div class="info-item">
                 <div class="text1">实际支付</div>
-                <div class="text1 prim" style="font-weight: bold">¥{{ info.couponId ? 0 : info.totalPrice }}</div>
+                <div class="text1 prim priceColor" style="font-weight: bold">
+                    ¥{{ info.couponId ? 0 : info.totalPrice }}
+                </div>
             </div>
             <div class="info-item" v-if="info.txHash">
                 <div class="text1">链上hash</div>

src/main/comos/yarn.lock

@@ -8483,6 +8483,11 @@ thread-loader@^2.1.3:
     loader-utils "^1.1.0"
     neo-async "^2.6.0"
 
+three@^0.136.0:
+  version "0.136.0"
+  resolved "https://registry.yarnpkg.com/three/-/three-0.136.0.tgz#b1504db021b46398ef468aa7849f3dcabb814f50"
+  integrity sha512-+fEMX7nYLz2ZesVP/dyifli5Jf8gR3XPAnFJveQ80aMhibFduzrADnjMbARXh8+W9qLK7rshJCjAIL/6cDxC+A==
+
 throttle-debounce@^1.0.1:
   version "1.1.0"
   resolved "https://registry.npm.taobao.org/throttle-debounce/download/throttle-debounce-1.1.0.tgz?cache=0&sync_timestamp=1604313832516&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fthrottle-debounce%2Fdownload%2Fthrottle-debounce-1.1.0.tgz#51853da37be68a155cb6e827b3514a3c422e89cd"