diff --git a/pages.json b/pages.json index a4d0e53..5093787 100644 --- a/pages.json +++ b/pages.json @@ -1,5 +1,23 @@ { "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages + { + "path" : "pages/mycollect/mycollect", + "style" : + { + "navigationBarTitleText": "分享", + "enablePullDownRefresh": false, + "navigationStyle":"custom" + } + }, + { + "path" : "pages/datail/datail", + "style" : + { + "navigationBarTitleText": "详情", + "enablePullDownRefresh": false, + "navigationStyle":"custom" + } + }, { "path": "pages/index/index", "style": { diff --git a/pages/datail/datail.scss b/pages/datail/datail.scss new file mode 100644 index 0000000..9984687 --- /dev/null +++ b/pages/datail/datail.scss @@ -0,0 +1,218 @@ +.contioner{ + width: 750rpx; + height: 1000rpx; + background-image: url(../../static/bcimg/bc.jpeg); + background-size: cover; + background-repeat: no-repeat; + display: flex; + justify-content: center; + align-items: center; + .headerdiv{ + width: 500rpx; + height: 500rpx; + border: solid 4rpx #FFFFFF; + background-color: #0b0b0b; + // background-image: url(../../static/bcimg/bc.jpeg); + background-size: cover; + text-align: center; + padding-top: 20rpx; + box-sizing: border-box; + border-radius: 15rpx; + image{ + width: 450rpx; + height: 450rpx; + } + + } +} + + +.pictrue{ + width: 750rpx; + // display: flex; + background-color: #000000; + padding-top: 40rpx; + // justify-content: center; +padding-bottom: 40rpx; + + .collect{ + width: 700rpx; + margin: 0rpx auto; + .collectcontent{ + width: 700rpx; + height: 300rpx; + background-color: #1a1a1a; + border-radius: 20rpx; + box-sizing: border-box; + .collectheader{ + width: 630rpx; + height: 150rpx; + border-bottom: #2b2b2b 2rpx solid; + padding-top: 20rpx; + margin: 0rpx auto; + + .title{ + color: #FFFFFF; + font-size: 40rpx; + font-weight: bold; + } + .tatol{ + display: flex; + width: 100%; + justify-content: space-between; + align-items: center; + .name{ + width: 200rpx; + height: 50rpx; + border-radius: 10rpx; + background: -webkit-linear-gradient(to right, #5acbfc, #a38cfb); /* Chrome 10-25, Safari 5.1-6 */ + background: linear-gradient(to right, #5acbfc, #a38cfb); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ + text-align: center; + box-sizing: border-box; + padding-top: 5rpx; + margin-top: 20rpx; + // vertical-align: middle; + .number{ + width: 120rpx; + height: 40rpx; + display: inline-block; + background-color: #1a1a1a; + border-top-right-radius: 10rpx; + border-bottom-right-radius: 10rpx; + color: #FFFFFF; + margin-left: 10rpx; + } + + } + .righttitle{ + text-align: right; + color: #54d4fe; + display: inline-block; + margin-top: 20rpx; + // vertical-align: middle; + + } + } + + } + + + .collectname{ + width: 630rpx; + height: 108rpx; + display: flex; + justify-content: space-between; + // background-color: #007AFF; + margin: 0rpx auto; + margin-top: 20rpx; + align-items: center; + .collectnameImg{ + width: 80rpx; + height: 80rpx; + background-color: #1a1a1a; + border-radius: 50%; + border: #FFFFFF solid 2rpx; + // box-sizing: border-box; + // padding: 5rpx; + // vertical-align: middle; + image{ + width: 80rpx; + height: 80rpx; + border-radius: 50%; + } + } + } + .collectnameTitle{ + // vertical-align: middle; + color: #464646; + margin-top: 20rpx; + margin-left: 20rpx; + } + .collectnameNumber{ + color: #464646; + } + } + } + + + + .SDK{ + width: 700rpx; + height: 100rpx; + background-color: #1a1a1a; + margin: 0rpx auto; + margin-top: 40rpx; + display: flex; + align-items: center; + justify-content: center; + color: #FFFFFF; + border-radius: 20rpx; + .RNM{ + margin-right: 20rpx; + + } + } + + .photo{ + width: 700rpx; + // height: 900rpx; + background-color: #1a1a1a; + margin: 0rpx auto; + margin-top: 40rpx; + border-radius: 20rpx; + box-sizing: border-box; + padding: 40rpx; + .phototitle{ + font-size: 34rpx; + font-weight: bold; + color: #FFFFFF; + margin-bottom: 30rpx; + } + image{ + width: 620rpx; + height: 800rpx; + } + } + .logo{ + width: 700rpx; + height: 300rpx; + background-color: #1a1a1a; + margin: 0rpx auto; + margin-top: 40rpx; + border-radius: 20rpx; + box-sizing: border-box; + padding: 30rpx; + .logotitle{ + font-size: 34rpx; + font-weight: bold; + color: #FFFFFF; + margin-bottom: 20rpx; + } + .logocontent{ + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + overflow: hidden; + color: #FFFFFF; + line-height: 50rpx; + } + } + .button{ + width: 700rpx; + height: 80rpx; + margin: auto; + margin-top: 40rpx; + display: flex; + align-items: center; + justify-content: center; + font-weight: 500; + border-radius: 40rpx; + background: #77A1D3; /* fallback for old browsers */ + background: -webkit-linear-gradient(to right, #E684AE, #8eeeed); /* Chrome 10-25, Safari 5.1-6 */ + background: linear-gradient(to right, #E684AE, #8eeeed); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ + } + + + + +} \ No newline at end of file diff --git a/pages/datail/datail.vue b/pages/datail/datail.vue new file mode 100644 index 0000000..7ccd173 --- /dev/null +++ b/pages/datail/datail.vue @@ -0,0 +1,91 @@ + + + + + diff --git a/pages/index/index.vue b/pages/index/index.vue index 3771629..68382da 100644 --- a/pages/index/index.vue +++ b/pages/index/index.vue @@ -225,4 +225,4 @@ } - + diff --git a/pages/mycollect/mycollect.scss b/pages/mycollect/mycollect.scss new file mode 100644 index 0000000..66dd3b5 --- /dev/null +++ b/pages/mycollect/mycollect.scss @@ -0,0 +1,3 @@ +.contioner{ + +} \ No newline at end of file diff --git a/pages/mycollect/mycollect.vue b/pages/mycollect/mycollect.vue new file mode 100644 index 0000000..0f45201 --- /dev/null +++ b/pages/mycollect/mycollect.vue @@ -0,0 +1,11 @@ + + + diff --git a/static/bcimg/bc.jpeg b/static/bcimg/bc.jpeg new file mode 100644 index 0000000..fe2beb9 Binary files /dev/null and b/static/bcimg/bc.jpeg differ