├── pages ├── .DS_Store ├── publish │ └── publish.vue └── index │ └── index.vue ├── static ├── .DS_Store ├── index │ ├── like.png │ ├── .DS_Store │ ├── 60x60.png │ ├── camera.png │ ├── islike.png │ ├── liked.png │ ├── comment.png │ ├── test │ │ ├── bear.jpg │ │ ├── bgi.jpg │ │ ├── bgi02.jpg │ │ ├── pig-01.jpg │ │ ├── pig-02.jpg │ │ ├── pig-03.jpg │ │ ├── pig-04.jpg │ │ ├── pig-05.jpg │ │ ├── pig-06.jpg │ │ ├── pig-07.jpg │ │ ├── pig-08.jpg │ │ ├── pig-09.jpg │ │ ├── test1.jpg │ │ ├── test2.jpg │ │ ├── test3.jpg │ │ ├── Netease.png │ │ ├── header01.jpg │ │ ├── header02.jpg │ │ ├── header03.jpg │ │ ├── header04.jpg │ │ ├── header05.jpg │ │ └── header06.jpg │ └── find-album-reflash-icon.png └── fonts │ ├── iconfont.ttf │ ├── HYQiHeiX1-45W.ttf │ ├── HYQiHeiX1-55W.ttf │ ├── taobao_global.ttf │ ├── fontawesome-webfont.eot │ ├── fontawesome-webfont.ttf │ ├── fontawesome-webfont.woff │ └── fontawesome-webfont.woff2 ├── components ├── .DS_Store └── im-chat │ ├── messageshow.vue │ └── chatinput.vue ├── README.md ├── main.js ├── pages.json ├── uni.scss ├── common ├── image.js ├── index │ ├── index.post.data.js │ └── index.css └── uni.css ├── App.vue └── manifest.json /pages/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/pages/.DS_Store -------------------------------------------------------------------------------- /static/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/.DS_Store -------------------------------------------------------------------------------- /components/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/components/.DS_Store -------------------------------------------------------------------------------- /static/index/like.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/index/like.png -------------------------------------------------------------------------------- /static/index/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/index/.DS_Store -------------------------------------------------------------------------------- /static/index/60x60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/index/60x60.png -------------------------------------------------------------------------------- /static/index/camera.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/index/camera.png -------------------------------------------------------------------------------- /static/index/islike.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/index/islike.png -------------------------------------------------------------------------------- /static/index/liked.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/index/liked.png -------------------------------------------------------------------------------- /static/fonts/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/fonts/iconfont.ttf -------------------------------------------------------------------------------- /static/index/comment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/index/comment.png -------------------------------------------------------------------------------- /static/index/test/bear.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/index/test/bear.jpg -------------------------------------------------------------------------------- /static/index/test/bgi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/index/test/bgi.jpg -------------------------------------------------------------------------------- /static/index/test/bgi02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/index/test/bgi02.jpg -------------------------------------------------------------------------------- /static/index/test/pig-01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/index/test/pig-01.jpg -------------------------------------------------------------------------------- /static/index/test/pig-02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/index/test/pig-02.jpg -------------------------------------------------------------------------------- /static/index/test/pig-03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/index/test/pig-03.jpg -------------------------------------------------------------------------------- /static/index/test/pig-04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/index/test/pig-04.jpg -------------------------------------------------------------------------------- /static/index/test/pig-05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/index/test/pig-05.jpg -------------------------------------------------------------------------------- /static/index/test/pig-06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/index/test/pig-06.jpg -------------------------------------------------------------------------------- /static/index/test/pig-07.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/index/test/pig-07.jpg -------------------------------------------------------------------------------- /static/index/test/pig-08.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/index/test/pig-08.jpg -------------------------------------------------------------------------------- /static/index/test/pig-09.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/index/test/pig-09.jpg -------------------------------------------------------------------------------- /static/index/test/test1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/index/test/test1.jpg -------------------------------------------------------------------------------- /static/index/test/test2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/index/test/test2.jpg -------------------------------------------------------------------------------- /static/index/test/test3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/index/test/test3.jpg -------------------------------------------------------------------------------- /static/fonts/HYQiHeiX1-45W.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/fonts/HYQiHeiX1-45W.ttf -------------------------------------------------------------------------------- /static/fonts/HYQiHeiX1-55W.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/fonts/HYQiHeiX1-55W.ttf -------------------------------------------------------------------------------- /static/fonts/taobao_global.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/fonts/taobao_global.ttf -------------------------------------------------------------------------------- /static/index/test/Netease.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/index/test/Netease.png -------------------------------------------------------------------------------- /static/index/test/header01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/index/test/header01.jpg -------------------------------------------------------------------------------- /static/index/test/header02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/index/test/header02.jpg -------------------------------------------------------------------------------- /static/index/test/header03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/index/test/header03.jpg -------------------------------------------------------------------------------- /static/index/test/header04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/index/test/header04.jpg -------------------------------------------------------------------------------- /static/index/test/header05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/index/test/header05.jpg -------------------------------------------------------------------------------- /static/index/test/header06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/index/test/header06.jpg -------------------------------------------------------------------------------- /static/fonts/fontawesome-webfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/fonts/fontawesome-webfont.eot -------------------------------------------------------------------------------- /static/fonts/fontawesome-webfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/fonts/fontawesome-webfont.ttf -------------------------------------------------------------------------------- /static/fonts/fontawesome-webfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/fonts/fontawesome-webfont.woff -------------------------------------------------------------------------------- /static/fonts/fontawesome-webfont.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/fonts/fontawesome-webfont.woff2 -------------------------------------------------------------------------------- /static/index/find-album-reflash-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Semporia/WeChat-Moments/master/static/index/find-album-reflash-icon.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # WeChat-Moments 2 | 3 | 基於uni-app開發的仿微信朋友圈，點贊評論 + 回覆評論、圖片預覽、發佈頁、圖片上載、圖片壓縮(app端)、發布頁側滑返回(app端體驗效果最佳)、評論與回覆時輸入框自動定位到當前內容下(導致輸入框閃爍,體驗不佳,待完善,可直接刪除adjust函數第一行的return測試)下拉刷新 + 加載更多 4 | 5 | 6 | -------------------------------------------------------------------------------- /main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App' 3 | 4 | Vue.config.productionTip = false 5 | 6 | App.mpType = 'app' 7 | 8 | const app = new Vue({ 9 | ...App 10 | }) 11 | app.$mount() 12 | -------------------------------------------------------------------------------- /pages.json: -------------------------------------------------------------------------------- 1 | { 2 | "pages" : [ 3 | //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages 4 | { 5 | "path" : "pages/index/index", 6 | "style" : { 7 | "navigationBarTitleText" : "发现", 8 | "enablePullDownRefresh" : true, 9 | "app-plus" : { 10 | "bounce" : "none", 11 | "titleNView" : { 12 | "type" : "transparent", 13 | "buttons" : [ 14 | { 15 | "background" : "rgba(255,255,255,0.2)", 16 | "color" : "#696969", 17 | "type" : "none", 18 | "fontSrc" : "/static/fonts/iconfont.ttf", 19 | "text" : "\ue608" //小相机 20 | } 21 | ] 22 | } 23 | } 24 | } 25 | }, 26 | { 27 | "path" : "pages/publish/publish", 28 | "style" : { 29 | "navigationBarTitleText" : "发布" 30 | } 31 | } 32 | ], 33 | "globalStyle" : { 34 | "navigationBarTextStyle" : "black", 35 | "navigationBarTitleText" : "uni-app", 36 | "navigationBarBackgroundColor" : "#F8F8F8", 37 | "backgroundColor" : "#F8F8F8" 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /uni.scss: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能 4 | * 5 | * 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件 6 | */ 7 | 8 | /* 颜色变量 */ 9 | 10 | /* 行为相关颜色 */ 11 | $uni-color-primary: #007aff; 12 | $uni-color-success: #4cd964; 13 | $uni-color-warning: #f0ad4e; 14 | $uni-color-error: #dd524d; 15 | 16 | /* 文字基本颜色 */ 17 | $uni-text-color:#333;//基本色 18 | $uni-text-color-inverse:#fff;//反色 19 | $uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息 20 | $uni-text-color-placeholder: #808080; 21 | $uni-text-color-disable:#c0c0c0; 22 | 23 | /* 背景颜色 */ 24 | $uni-bg-color:#ffffff; 25 | $uni-bg-color-grey:#f8f8f8; 26 | $uni-bg-color-hover:#f1f1f1;//点击状态颜色 27 | $uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色 28 | 29 | /* 边框颜色 */ 30 | $uni-border-color:#c8c7cc; 31 | 32 | /* 尺寸变量 */ 33 | 34 | /* 文字尺寸 */ 35 | $uni-font-size-sm:24upx; 36 | $uni-font-size-base:28upx; 37 | $uni-font-size-lg:32upx; 38 | 39 | /* 图片尺寸 */ 40 | $uni-img-size-sm:40upx; 41 | $uni-img-size-base:52upx; 42 | $uni-img-size-lg:80upx; 43 | 44 | /* Border Radius */ 45 | $uni-border-radius-sm: 4upx; 46 | $uni-border-radius-base: 6upx; 47 | $uni-border-radius-lg: 12upx; 48 | $uni-border-radius-circle: 50%; 49 | 50 | /* 水平间距 */ 51 | $uni-spacing-row-sm: 10px; 52 | $uni-spacing-row-base: 20upx; 53 | $uni-spacing-row-lg: 30upx; 54 | 55 | /* 垂直间距 */ 56 | $uni-spacing-col-sm: 8upx; 57 | $uni-spacing-col-base: 16upx; 58 | $uni-spacing-col-lg: 24upx; 59 | 60 | /* 透明度 */ 61 | $uni-opacity-disabled: 0.3; // 组件禁用态的透明度 62 | 63 | /* 文章场景相关 */ 64 | $uni-color-title: #2C405A; // 文章标题颜色 65 | $uni-font-size-title:40upx; 66 | $uni-color-subtitle: #555555; // 二级标题颜色 67 | $uni-font-size-subtitle:36upx; 68 | $uni-color-paragraph: #3F536E; // 文章段落颜色 69 | $uni-font-size-paragraph:30upx; -------------------------------------------------------------------------------- /common/image.js: -------------------------------------------------------------------------------- 1 | /** 2 | * 使用plus.zip.compressImage压缩,目前仅支持App端 3 | */ 4 | 5 | 6 | let images = [];//压缩后的图片集合 7 | let max_width = 500;//若宽度大于此尺寸,触发压缩,否则使用原图,可自行修改 8 | 9 | /** 10 | * 接收图片集合 11 | */ 12 | async function compress(_images, _fun) { 13 | for (let i = 0; i < _images.length; i++) {//循环单张压缩 14 | var compressd_image = await _compress(_images[i]) 15 | images.push(compressd_image); 16 | } 17 | _fun && _fun(images); 18 | images = [];//压缩结束重置images,准备下次压缩 19 | } 20 | 21 | /** 22 | * 菜鸟请大神教我如何优化QAQ~ 23 | */ 24 | async function _compress(_image) { 25 | 26 | var last4chars = _image.slice(-4); 27 | if (plus.os.name == 'Android') { //安卓下plus.zip.compressImage只支持jpeg/jpg/png 28 | if (!~last4chars.indexOf('jpg') && !~last4chars.indexOf('png') && !~last4chars.indexOf('jpeg')) { 29 | return _image; 30 | } 31 | } 32 | 33 | var image_info = await get_image_info(_image); 34 | if (image_info.width < max_width) { //小于800不压缩 35 | return _image; 36 | } 37 | 38 | return new Promise((resolve, reject) => { 39 | plus.zip.compressImage({ 40 | src: _image,//原始图片的路径 41 | dst: _image,//压缩转换目标图片的路径(为了省事这里使用原路径) 42 | overwrite: true,//使用原文件名并覆盖,如果想将原文件保留,并和压缩后图片同时上传,需要改为false,并修改dst 43 | quality: 100,//1-100,压缩后质量,越低图片占用空间越小,越模糊 44 | width: max_width+'px',//这里先写死800;height默认为auto,即根据width与源图宽的缩放比例计算 45 | }, 46 | (res) => { 47 | resolve(res.target) 48 | }, 49 | (e) => { 50 | reject(e); 51 | } 52 | ) 53 | 54 | }) 55 | 56 | 57 | } 58 | 59 | function get_image_info(_image) { 60 | return new Promise((resolve, reject) => { 61 | uni.getImageInfo({ 62 | src: _image, 63 | success: res => { 64 | resolve(res); 65 | } 66 | }) 67 | }) 68 | } 69 | 70 | export default { 71 | compress 72 | } 73 | -------------------------------------------------------------------------------- /App.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 79 | -------------------------------------------------------------------------------- /components/im-chat/messageshow.vue: -------------------------------------------------------------------------------- 1 | 16 | 17 | 22 | 23 | 93 | -------------------------------------------------------------------------------- /common/index/index.post.data.js: -------------------------------------------------------------------------------- 1 | export default [{ 2 | "post_id": '1', 3 | "uid": 1, 4 | "username": "下辈子好好过", 5 | "header_image": "/static/index/test/header03.jpg", 6 | "content": { 7 | "text": "我总是喜欢上那些不会喜欢上我这种人的人。", 8 | "images": ["/static/index/test/test3.jpg"] 9 | }, 10 | "islike": 0, 11 | "like": [{ 12 | "uid": 2, 13 | "username": "小李子," 14 | }, 15 | { 16 | "uid": 3, 17 | "username": "小张子" 18 | } 19 | ], 20 | "comments": { 21 | "total": 2, 22 | "comment": [{ 23 | "uid": 2, 24 | "username": '知', 25 | "content": "我的那朵玫瑰，别人会以为她和你们一样，但她单独一朵，就胜过你们所有。因为，她是我浇灌的。因为，她是我放在花罩中的。因为，她是我用屏风保护起来的。因为，她身上的毛毛虫，除了两三条要留着变蝴蝶，其他的，都是我除掉的。因为，我倾听过她的哀怨，她的吹嘘，有时甚至是她的沉默。" 26 | }, 27 | { 28 | "uid": 3, 29 | "username": '小虎', 30 | "content": "一起出去好吗?" 31 | } 32 | ] 33 | }, 34 | "timestamp": "5分钟前" 35 | }, 36 | { 37 | "post_id": 2, 38 | "uid": 1, 39 | "username": "菁英公寓-打造属于你的私密空间 小吴", 40 | "header_image": "/static/index/test/header04.jpg", 41 | "content": { 42 | "text": "租房:东环朝南\n\r2室大衣柜\n\r燃气热水器\n\r5楼采光充足\n\r随时入住", 43 | "images": [ 44 | "/static/index/test/pig-01.jpg", 45 | "/static/index/test/pig-02.jpg", 46 | "/static/index/test/pig-03.jpg", 47 | "/static/index/test/pig-04.jpg", 48 | "/static/index/test/pig-05.jpg", 49 | "/static/index/test/pig-06.jpg", 50 | "/static/index/test/pig-07.jpg", 51 | "/static/index/test/pig-08.jpg", 52 | "/static/index/test/pig-09.jpg" 53 | ] 54 | }, 55 | "islike": 0, 56 | "like": [{ 57 | "uid": 2, 58 | "username": "小王子," 59 | }, 60 | { 61 | "uid": 3, 62 | "username": "张大大" 63 | } 64 | ], 65 | "comments": { 66 | "total": 2, 67 | "comment": [{ 68 | "uid": 2, 69 | "username": '小虎', 70 | "content": "吃错药了!" 71 | }, 72 | { 73 | "uid": 3, 74 | "username": '小狼', 75 | "content": "霍霍霍霍霍霍霍霍霍霍霍霍霍霍霍霍霍霍霍霍霍霍!" 76 | } 77 | ] 78 | }, 79 | "timestamp": "1小时前" 80 | }, 81 | { 82 | "post_id": 2, 83 | "uid": 1, 84 | "username": "BSK 必胜客新苏 小乐", 85 | "header_image": "/static/index/test/header05.jpg", 86 | "content": { 87 | "text": "美食花样多，诱人如北北；迎来小宇宙，幸福两行泪[喵喵]这可是小必的心声啊～", 88 | "images": ["/static/index/test/header01.jpg", "/static/index/test/header01.jpg", 89 | "/static/index/test/header01.jpg", "/static/index/test/header01.jpg" 90 | ] 91 | }, 92 | "islike": 0, 93 | "like": [{ 94 | "uid": 2, 95 | "username": "小王子," 96 | }, 97 | { 98 | "uid": 3, 99 | "username": "张大大" 100 | } 101 | ], 102 | "comments": { 103 | "total": 2, 104 | "comment": [{ 105 | "uid": 2, 106 | "username": '小虎', 107 | "content": "吃错药了!" 108 | }, 109 | { 110 | "uid": 3, 111 | "username": '小狼', 112 | "content": "霍霍霍霍霍霍霍霍霍霍霍霍霍霍霍霍霍霍霍霍霍霍!" 113 | } 114 | ] 115 | }, 116 | "timestamp": "7小时前" 117 | } 118 | ] 119 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name" : "uni-app-moments", 3 | "appid" : "", 4 | "description" : "", 5 | "versionName" : "1.2.1", 6 | "versionCode" : 121, 7 | "transformPx" : false, 8 | "app-plus" : { 9 | "usingComponents" : true, //是否启用`自定义组件模式`，为true表示新的`自定义组件模式` ，否则为`template模板模式` 10 | 11 | /* 5+App特有相关 */ 12 | "splashscreen" : { 13 | "alwaysShowBeforeRender" : true, 14 | "waiting" : true, 15 | "autoclose" : true, 16 | "delay" : 0 17 | }, 18 | "modules" : {}, 19 | /* 模块配置 */ 20 | "distribute" : { 21 | /* 应用发布信息 */ 22 | "android" : { 23 | /* android打包配置 */ 24 | "permissions" : [ 25 | "", 26 | "", 27 | "", 28 | "", 29 | "", 30 | "", 31 | "", 32 | "", 33 | "", 34 | "", 35 | "", 36 | "", 37 | "", 38 | "", 39 | "", 40 | "", 41 | "", 42 | "", 43 | "", 44 | "", 45 | "", 46 | "" 47 | ] 48 | }, 49 | "ios" : {}, 50 | /* ios打包配置 */ 51 | "sdkConfigs" : {} 52 | } 53 | }, 54 | /* SDK配置 */ 55 | "quickapp" : {}, 56 | /* 快应用特有相关 */ 57 | "mp-weixin" : { 58 | /* 小程序特有相关 */ 59 | "appid" : "", 60 | "setting" : { 61 | "urlCheck" : true 62 | } 63 | }, 64 | "h5" : { 65 | "title" : "WeChat-Moments", 66 | "domain" : "" 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /components/im-chat/chatinput.vue: -------------------------------------------------------------------------------- 1 | 14 | 15 | 69 | 70 | 128 | -------------------------------------------------------------------------------- /common/index/index.css: -------------------------------------------------------------------------------- 1 | .liked { 2 | /* display: inline-block; */ 3 | position: relative; 4 | margin-right: 10upx; 5 | width: 34upx; 6 | height: 34upx; 7 | } 8 | 9 | .post-username { 10 | font-size: 32upx; 11 | font-weight: 600; 12 | color: var(--blue); 13 | } 14 | 15 | .gallery_img { 16 | width: 100%; 17 | height: 100% 18 | } 19 | 20 | .header { 21 | width: 100%; 22 | height: 100%; 23 | z-index: 10; 24 | border-radius: 40upx; 25 | } 26 | 27 | .publish { 28 | position: absolute; 29 | top: 20upx; 30 | right: 20upx; 31 | /* z-index: 9999; */ 32 | } 33 | 34 | .post_header { 35 | width: 90upx !important; 36 | height: 90upx !important; 37 | border-radius: 10upx; 38 | margin-top: 8upx; 39 | } 40 | 41 | #moments { 42 | background: var(--Default-background-color); 43 | } 44 | 45 | #moments .home-pic { 46 | width: 100%; 47 | /* margin-top: -150upx; */ 48 | position: relative; 49 | height: 500upx; 50 | z-index: 5; 51 | background: url(../../static/index/test/bgi02.jpg) no-repeat center center; 52 | background-size: cover; 53 | margin-bottom: 50upx 54 | } 55 | 56 | #moments .home-pic-base { 57 | position: absolute; 58 | left: -60upx; 59 | bottom: -40upx; 60 | width: 100%; 61 | height: 160upx; 62 | padding: 0 30upx; 63 | } 64 | 65 | #moments .home-pic-base .top-pic { 66 | width: 360upx; 67 | height: 360upx; 68 | border-radius: 40upx; 69 | -webkit-transform: scale(0.5); 70 | -ms-transform: scale(0.5); 71 | transform: scale(0.5); 72 | -webkit-transform-origin: 100% 0%; 73 | -ms-transform-origin: 100% 0%; 74 | transform-origin: 100% 0%; 75 | background-color: var(--Highlight-background-color); 76 | float: right 77 | } 78 | 79 | #moments .home-pic-base .top-name { 80 | position: absolute; 81 | /* left: 20px; */ 82 | right: 240upx; 83 | top: 30upx; 84 | font-size: 32upx; 85 | font-weight: 600; 86 | text-align: right; 87 | color: var(--text-color); 88 | overflow: hidden 89 | } 90 | 91 | #moments .moments__post { 92 | display: block; 93 | border-bottom: 1px solid var(--border-color); 94 | padding: 30upx 20upx; 95 | position: relative; 96 | display: -webkit-box; 97 | display: -webkit-flex; 98 | display: flex; 99 | } 100 | 101 | #moments .moments__post::before { 102 | content: none 103 | } 104 | 105 | #moments .moments__post .post_right { 106 | font-size: 32upx; 107 | display: table-cell; 108 | padding-left: 20upx; 109 | width: 100%; 110 | } 111 | #moments .moments__post .post_right .paragraph{ 112 | margin: 10upx 0upx; 113 | color: var(--text-color); 114 | font-size: 28upx; 115 | } 116 | 117 | /* #moments .moments__post .post_right .paragraphExtender {margin: 5px auto;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex} */ 118 | #moments .moments__post .title { 119 | color: var(--blue) 120 | } 121 | 122 | #moments .moments__post .thumbnails { 123 | width: 100%; 124 | display: flex; 125 | flex-wrap: wrap; 126 | /* display: -webkit-box;display: -webkit-flex;display: -ms-flexbox; */ 127 | /* -webkit-flex-wrap: wrap;-ms-flex-wrap: wrap; */ 128 | } 129 | 130 | #moments .moments__post .thumbnails .thumbnail { 131 | width: 30%; 132 | height: 180upx; 133 | margin: 4upx; 134 | background: #757575; 135 | overflow: hidden; 136 | } 137 | 138 | .my-gallery { 139 | width: 250upx; 140 | height: 400upx; 141 | margin: 4upx; 142 | background: #757575; 143 | overflow: hidden 144 | } 145 | 146 | #moments .moments__post .toolbar { 147 | position: relative; 148 | top: 10upx; 149 | display: -webkit-box; 150 | display: -webkit-flex; 151 | display: -ms-flexbox; 152 | display: flex; 153 | -webkit-box-align: center; 154 | -webkit-align-items: center; 155 | -ms-flex-align: center; 156 | align-items: center 157 | } 158 | 159 | #moments .moments__post .toolbar .timestamp { 160 | color: #757575; 161 | font-size: 22upx; 162 | } 163 | 164 | #moments .moments__post .like { 165 | width: auto; 166 | height: auto; 167 | position: absolute; 168 | right: 60upx; 169 | display: flex; 170 | align-items: center; 171 | } 172 | @media (prefers-color-scheme: dark) { 173 | #moments .moments__post .like,.comment image{ 174 | -webkit-filter: brightness(0) invert(1); 175 | filter: brightness(0) invert(1); 176 | } 177 | } 178 | 179 | #moments .moments__post .comment { 180 | width: auto; 181 | height: auto; 182 | position: absolute; 183 | right: 0upx; 184 | display: flex; 185 | align-items: center; 186 | } 187 | 188 | #moments .moments__post .toolbar image { 189 | padding-left: 20upx; 190 | width: 40upx; 191 | height: 40upx; 192 | } 193 | 194 | .post-footer { 195 | margin-top: 30upx; 196 | padding: 10upx 30upx; 197 | background-color: var(--Highlight-background-color); 198 | border-radius: 10upx; 199 | } 200 | 201 | #moments .moments__post .footer_content { 202 | padding: 10upx 0upx; 203 | position: relative; 204 | display: -webkit-box; 205 | display: -webkit-flex; 206 | display: -ms-flexbox; 207 | display: flex; 208 | -webkit-box-align: center; 209 | -webkit-align-items: center; 210 | -ms-flex-align: center; 211 | align-items: center; 212 | -webkit-flex-wrap: wrap; 213 | -ms-flex-wrap: wrap; 214 | flex-wrap: wrap; 215 | } 216 | 217 | #moments .moments__post .footer_content .nickname { 218 | color: var(--blue); 219 | font-size: 24upx 220 | } 221 | 222 | #moments .moments__post .footer_content .comment-nickname { 223 | color: var(--blue); 224 | font-size: 24upx 225 | } 226 | 227 | #moments .moments__post .footer_content .comment-content { 228 | color: var(--text-color); 229 | font-size: 24upx 230 | } 231 | #moments .moments__post .footer_content .comment-content span{ 232 | color: var(--text-color); 233 | } 234 | .foot { 235 | position: fixed; 236 | width: 100%; 237 | height: 90upx; 238 | min-height: 90upx; 239 | left: 0upx; 240 | bottom: 0upx; 241 | overflow: hidden; 242 | } 243 | -------------------------------------------------------------------------------- /pages/publish/publish.vue: -------------------------------------------------------------------------------- 1 |