|
|
@@ -0,0 +1,381 @@
|
|
|
+*{
|
|
|
+ font-weight: 400;
|
|
|
+}
|
|
|
+.active-color {
|
|
|
+ color: #13c7a7;
|
|
|
+}
|
|
|
+
|
|
|
+.top-title {
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.album-name {
|
|
|
+ padding: 10px 15px;
|
|
|
+ border-radius: 20px;
|
|
|
+ margin-right: 20px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.active-album-name {
|
|
|
+ background: #13c7a7;
|
|
|
+ color: white;
|
|
|
+}
|
|
|
+
|
|
|
+.select-name {
|
|
|
+ display: flex;
|
|
|
+ margin: 0 10px;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.type-box {
|
|
|
+ margin: 0 0 0 30px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.el-icon-caret-top {
|
|
|
+ position: absolute;
|
|
|
+ top: -1px;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.el-icon-caret-bottom {
|
|
|
+ position: absolute;
|
|
|
+ top: 6px;
|
|
|
+ font-size: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.bottom-album {
|
|
|
+ margin: 0 10px;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
|
+ grid-column-gap: 15px;
|
|
|
+ padding-bottom: 100px;
|
|
|
+}
|
|
|
+
|
|
|
+.bottom-album .album-box {
|
|
|
+ background: white;
|
|
|
+ padding: 10px 10px 5px 10px;
|
|
|
+ width: 100%;
|
|
|
+ border-radius: 10px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.bottom-album .album-box .inside-box{
|
|
|
+ padding: 0 5px 5px 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.bottom-album .album-box .inside-box .album-name-box{
|
|
|
+ margin-top: 18px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+.hides{
|
|
|
+ overflow:hidden;
|
|
|
+ /* white-space:nowrap; */
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ height: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+ .rotate{
|
|
|
+ /* transition:transform 2s linear 1s ; */
|
|
|
+ transform: rotate(180deg);
|
|
|
+}
|
|
|
+
|
|
|
+.item-data-box{
|
|
|
+ padding: 15px;
|
|
|
+ display: flex;
|
|
|
+ justify-content:space-around;
|
|
|
+ align-items:center;
|
|
|
+ background-color: #FFFAF1;
|
|
|
+ margin-top: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.item-data-box .top-word{
|
|
|
+ color: #DF0F0F;
|
|
|
+}
|
|
|
+
|
|
|
+.item-data-box .bottom-word{
|
|
|
+ color: #333333;;
|
|
|
+ font-size: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.item-data-box div{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.goods-show{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.goods-show img{
|
|
|
+ width: 175px;
|
|
|
+ height: 175px;
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ overflow: hidden;
|
|
|
+}
|
|
|
+
|
|
|
+.bottom-album .album-box .bottom-box{
|
|
|
+ margin-top: 25px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+}
|
|
|
+
|
|
|
+.bottom-album .album-box .bottom-box .btn{
|
|
|
+ width: 100px;
|
|
|
+ height: 40px;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #29BA9C;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+.bottom-album .album-box .bottom-box .btn-goods{
|
|
|
+ width: 100px;
|
|
|
+ height: 40px;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #FFB025;
|
|
|
+ border-radius: 5px;
|
|
|
+ border: 0;
|
|
|
+}
|
|
|
+.bottom-album .album-box .bottom-box-top3{
|
|
|
+ margin-top: 25px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+}
|
|
|
+
|
|
|
+.bottom-album .album-box .bottom-box-top3 .btn{
|
|
|
+ width: 100px;
|
|
|
+ height: 40px;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #29BA9C;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+.bottom-album .album-box .bottom-box-top3 .btn-goods{
|
|
|
+ width: 100px;
|
|
|
+ height: 40px;
|
|
|
+ color: #fff;
|
|
|
+ background-color: #FFB025;
|
|
|
+ border-radius: 5px;
|
|
|
+ border: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.bottom-album .album-box .inside-box .describe-box{
|
|
|
+ margin-top: 10px;
|
|
|
+ background-color: #fff;
|
|
|
+ border-radius: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.bottom-album .cover .el-image {
|
|
|
+ width: 100%;
|
|
|
+ /* max-height: 60px; */
|
|
|
+}
|
|
|
+
|
|
|
+.bottom-album .top-pane .top-pane-img {
|
|
|
+ width: 120px;
|
|
|
+ max-height: 60px;
|
|
|
+ margin-right: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.bottom-album .top-pane {
|
|
|
+ display: flex;
|
|
|
+}
|
|
|
+
|
|
|
+/* .bottom-album .top-pane img{
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+} */
|
|
|
+
|
|
|
+.bottom-album .right-box {
|
|
|
+ /* margin-left: 20px; */
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.bottom-album .goods-album-name {
|
|
|
+ font-weight: 600;
|
|
|
+ display: -webkit-box;
|
|
|
+ -webkit-line-clamp: 1;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ -webkit-box-orient: vertical;
|
|
|
+}
|
|
|
+
|
|
|
+.bottom-album .tag-box {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+
|
|
|
+.bottom-album .tag-name {
|
|
|
+ background: #ffefd4;
|
|
|
+ padding: 5px 10px;
|
|
|
+ border-radius: 5px;
|
|
|
+ color: #ff7f4e;
|
|
|
+ margin: 5px 5px 0 0;
|
|
|
+}
|
|
|
+
|
|
|
+.middle-pane {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: 1fr 1fr 1fr;
|
|
|
+ margin: 15px 0;
|
|
|
+ grid-column-gap: 15px;
|
|
|
+ max-height: 150px;
|
|
|
+}
|
|
|
+
|
|
|
+.active-middle-pane {
|
|
|
+ height: 150px !important;
|
|
|
+}
|
|
|
+
|
|
|
+.middle-pane img {
|
|
|
+ width: 100%;
|
|
|
+ max-height: 150px;
|
|
|
+}
|
|
|
+
|
|
|
+.date {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.date .date-name {
|
|
|
+ color: #b5b5b5;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.shop-icon {
|
|
|
+ font-size: 18px;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.shop-icon .icon {
|
|
|
+ margin-left: 10px;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+.bottom-pane {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-evenly;
|
|
|
+ border-top: 2px solid #f4f4f4;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.bottom-pane .left-box {
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.bottom-pane .line {
|
|
|
+ width: 2px;
|
|
|
+ height: 60px;
|
|
|
+ background: #f4f4f4;
|
|
|
+}
|
|
|
+
|
|
|
+.bottom-pane .right-num {
|
|
|
+}
|
|
|
+
|
|
|
+.vue-page {
|
|
|
+ padding: 20px;
|
|
|
+ /* height: 130px; */
|
|
|
+}
|
|
|
+
|
|
|
+.vue-page-bottom {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+}
|
|
|
+
|
|
|
+.vue-page-bottom .tip {
|
|
|
+ color: #ff7a78;
|
|
|
+ font-size: 15px;
|
|
|
+}
|
|
|
+
|
|
|
+.form-pane {
|
|
|
+ margin: 20px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.el-dialog__body {
|
|
|
+ padding: 0;
|
|
|
+}
|
|
|
+
|
|
|
+.el-dialog {
|
|
|
+ border-radius: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.tips{
|
|
|
+ margin-left: 85px;
|
|
|
+}
|
|
|
+
|
|
|
+.context {
|
|
|
+ padding: 40px 0 20px 0;
|
|
|
+ /* border-top: 1px solid #EBEEF5; */
|
|
|
+ border-bottom: 1px solid #EBEEF5;
|
|
|
+}
|
|
|
+
|
|
|
+.img-box {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.msg-line {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ margin: 10px;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.msg-line span {
|
|
|
+ margin: 10px 0;
|
|
|
+}
|
|
|
+
|
|
|
+.upload-line {
|
|
|
+ color: #29BA9C;
|
|
|
+ margin-top: 5px;
|
|
|
+}
|
|
|
+
|
|
|
+.el-image {
|
|
|
+ width: 120px;
|
|
|
+ height: 120px;
|
|
|
+}
|
|
|
+
|
|
|
+.space-input {
|
|
|
+ justify-content: center;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.space-input span {
|
|
|
+ width: 100px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.space-input .el-input {
|
|
|
+ width: 40%;
|
|
|
+ margin: 0 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.bottom {
|
|
|
+ padding: 20px 10px;
|
|
|
+ text-align: right;
|
|
|
+}
|
|
|
+
|
|
|
+.el-icon-edit {
|
|
|
+ padding: 0;
|
|
|
+}
|