Commit 2f23010ecd412149468a12694491a34e1dcef85a
1 parent
d4db682c
Exists in
master
feat:导师删除,联系修改
Showing
5 changed files
with
332 additions
and
268 deletions
Show diff stats
src/views/Home.vue
| @@ -15,7 +15,14 @@ | @@ -15,7 +15,14 @@ | ||
| 15 | </van-swipe> | 15 | </van-swipe> |
| 16 | </div> | 16 | </div> |
| 17 | <div class="content"> | 17 | <div class="content"> |
| 18 | - <van-search v-model="searchValue" placeholder="搜索馆关键字、活动、研学旅行" shape="round" @search="onSearch()" /> | 18 | + <van-search |
| 19 | + v-model="searchValue" | ||
| 20 | + :placeholder="placeholder" | ||
| 21 | + @focus="placeholder = ''" | ||
| 22 | + @blur="placeholder = '搜索馆关键字、活动、研学旅行'" | ||
| 23 | + shape="round" | ||
| 24 | + @search="onSearch()" | ||
| 25 | + /> | ||
| 19 | <div class="type_box"> | 26 | <div class="type_box"> |
| 20 | <div @click="handleCourseMore()"> | 27 | <div @click="handleCourseMore()"> |
| 21 | <img src="@/assets/service/homeicon1.png" alt="" /> | 28 | <img src="@/assets/service/homeicon1.png" alt="" /> |
| @@ -33,10 +40,10 @@ | @@ -33,10 +40,10 @@ | ||
| 33 | <img src="@/assets/service/homeicon4.png" alt="" /> | 40 | <img src="@/assets/service/homeicon4.png" alt="" /> |
| 34 | <p>官方资讯</p> | 41 | <p>官方资讯</p> |
| 35 | </div> | 42 | </div> |
| 36 | - <div @click="handleTeacher()"> | 43 | + <!-- <div @click="handleTeacher()"> |
| 37 | <img src="@/assets/service/homeicon5.png" alt="" /> | 44 | <img src="@/assets/service/homeicon5.png" alt="" /> |
| 38 | <p>研学导师</p> | 45 | <p>研学导师</p> |
| 39 | - </div> | 46 | + </div> --> |
| 40 | </div> | 47 | </div> |
| 41 | <div class="infomation_box"> | 48 | <div class="infomation_box"> |
| 42 | <img class="news" src="@/assets/service/news.png" @click="handleNewMore()" alt="" /> | 49 | <img class="news" src="@/assets/service/news.png" @click="handleNewMore()" alt="" /> |
| @@ -115,6 +122,7 @@ export default { | @@ -115,6 +122,7 @@ export default { | ||
| 115 | }, | 122 | }, |
| 116 | data() { | 123 | data() { |
| 117 | return { | 124 | return { |
| 125 | + placeholder: '搜索馆关键字、活动、研学旅行', | ||
| 118 | tieshi: true, | 126 | tieshi: true, |
| 119 | navActive: 1, | 127 | navActive: 1, |
| 120 | swipeImgs: '', | 128 | swipeImgs: '', |
src/views/Service/AbroadDetailNext/AbroadDetail.scss
| @@ -584,6 +584,19 @@ | @@ -584,6 +584,19 @@ | ||
| 584 | margin-bottom: 44px; | 584 | margin-bottom: 44px; |
| 585 | } | 585 | } |
| 586 | } | 586 | } |
| 587 | + .contact_btn { | ||
| 588 | + position: fixed; | ||
| 589 | + bottom: 36px; | ||
| 590 | + left: 15px; | ||
| 591 | + width: 720px; | ||
| 592 | + height: 92px; | ||
| 593 | + text-align: center; | ||
| 594 | + line-height: 92px; | ||
| 595 | + background: rgb(22, 190, 142); | ||
| 596 | + border-radius: 46px; | ||
| 597 | + font-size: 36px; | ||
| 598 | + color: #fff; | ||
| 599 | + } | ||
| 587 | .Collection2 { | 600 | .Collection2 { |
| 588 | position: fixed; | 601 | position: fixed; |
| 589 | bottom: 0; | 602 | bottom: 0; |
src/views/Service/AbroadDetailNext/AbroadDetailNext.vue
| @@ -54,7 +54,7 @@ | @@ -54,7 +54,7 @@ | ||
| 54 | </div> | 54 | </div> |
| 55 | </div> | 55 | </div> |
| 56 | <package v-if="courseId" :courseId="courseId" :packageArr="packageArr"></package> | 56 | <package v-if="courseId" :courseId="courseId" :packageArr="packageArr"></package> |
| 57 | - <p class="tip">如有特殊需求请联系【客服】</p> | 57 | + <p class="tip" @click="handleContact">如有特殊需求请联系【客服】</p> |
| 58 | <div class="package top_border" v-if="packageArr.length > 0 && packageArr[packageActive].comboInfoList.length > 1"> | 58 | <div class="package top_border" v-if="packageArr.length > 0 && packageArr[packageActive].comboInfoList.length > 1"> |
| 59 | <div class="package_box"> | 59 | <div class="package_box"> |
| 60 | <div style="overflow: auto"> | 60 | <div style="overflow: auto"> |
| @@ -84,12 +84,8 @@ | @@ -84,12 +84,8 @@ | ||
| 84 | <!-- 基地信息 --> | 84 | <!-- 基地信息 --> |
| 85 | <abroad-base v-if="detailData" :baseId="detailData.baseId"></abroad-base> | 85 | <abroad-base v-if="detailData" :baseId="detailData.baseId"></abroad-base> |
| 86 | 86 | ||
| 87 | - <div class="Collection2"> | ||
| 88 | - <div class="box"> | ||
| 89 | - <div class="btn" @click="handleShare"></div> | ||
| 90 | - <div class="btn" @click="handleContact"></div> | ||
| 91 | - </div> | ||
| 92 | - </div> | 87 | + <div class="contact_btn" @click="handleContact">联系客服</div> |
| 88 | + | ||
| 93 | <!-- <div class="Collection" v-if="detailData"> | 89 | <!-- <div class="Collection" v-if="detailData"> |
| 94 | <ShareBox type="button" :detailData="detailData" v-if="showShareBox" @hiddenShare="showShareBox=false" @showShareDes="showShareDes=true"></ShareBox> | 90 | <ShareBox type="button" :detailData="detailData" v-if="showShareBox" @hiddenShare="showShareBox=false" @showShareDes="showShareDes=true"></ShareBox> |
| 95 | <div class="box box1"> | 91 | <div class="box box1"> |
| @@ -626,14 +622,23 @@ export default { | @@ -626,14 +622,23 @@ export default { | ||
| 626 | handleContact() { | 622 | handleContact() { |
| 627 | let mobile = this.baseDetailData.mobile[0] | 623 | let mobile = this.baseDetailData.mobile[0] |
| 628 | if (mobile) { | 624 | if (mobile) { |
| 629 | - ZWJSBridge.phoneCall({ | ||
| 630 | - corpId: mobile, | 625 | + this.$dialog.confirm({ |
| 626 | + title: '提示', | ||
| 627 | + message: '是否拨打客服电话', | ||
| 631 | }) | 628 | }) |
| 632 | - .then((res) => { | ||
| 633 | - console.log(res) | 629 | + .then(() => { |
| 630 | + ZWJSBridge.phoneCall({ | ||
| 631 | + corpId: mobile, | ||
| 632 | + }) | ||
| 633 | + .then((res) => { | ||
| 634 | + console.log(res) | ||
| 635 | + }) | ||
| 636 | + .catch((err) => { | ||
| 637 | + console.log(err) | ||
| 638 | + }) | ||
| 634 | }) | 639 | }) |
| 635 | - .catch((err) => { | ||
| 636 | - console.log(err) | 640 | + .catch(() => { |
| 641 | + // on cancel | ||
| 637 | }) | 642 | }) |
| 638 | } else { | 643 | } else { |
| 639 | this.$toast('暂无联系方式') | 644 | this.$toast('暂无联系方式') |
| @@ -644,7 +649,17 @@ export default { | @@ -644,7 +649,17 @@ export default { | ||
| 644 | </script> | 649 | </script> |
| 645 | <style lang="scss"> | 650 | <style lang="scss"> |
| 646 | .elder { | 651 | .elder { |
| 647 | - .abroad_detail .uni_text .address,.abroad_detail .uni_text .rate > span,.package .period_nodata,.abroad_detail .package .package_title,.abroad_detail .tip,.abroad_detail .cardCont .day_tag,.abroad_detail .cardCont table td,.abroad_detail .tag_item .tag_title,.abroad_detail .tag_item .tag_text,.abroad_detail .base .center .address,.abroad_detail .base .center .tag { | 652 | + .abroad_detail .uni_text .address, |
| 653 | + .abroad_detail .uni_text .rate > span, | ||
| 654 | + .package .period_nodata, | ||
| 655 | + .abroad_detail .package .package_title, | ||
| 656 | + .abroad_detail .tip, | ||
| 657 | + .abroad_detail .cardCont .day_tag, | ||
| 658 | + .abroad_detail .cardCont table td, | ||
| 659 | + .abroad_detail .tag_item .tag_title, | ||
| 660 | + .abroad_detail .tag_item .tag_text, | ||
| 661 | + .abroad_detail .base .center .address, | ||
| 662 | + .abroad_detail .base .center .tag { | ||
| 648 | font-size: 36px !important; | 663 | font-size: 36px !important; |
| 649 | } | 664 | } |
| 650 | } | 665 | } |
src/views/Service/BaseDetail/BaseDetail.scss
| 1 | .base_detail { | 1 | .base_detail { |
| 2 | - padding-bottom: 200px; | ||
| 3 | - .header { | ||
| 4 | - img { | ||
| 5 | - width: 100%; | ||
| 6 | - } | 2 | + padding-bottom: 200px; |
| 3 | + .header { | ||
| 4 | + img { | ||
| 5 | + width: 100%; | ||
| 6 | + } | ||
| 7 | + } | ||
| 8 | + .uni_text { | ||
| 9 | + width: 100%; | ||
| 10 | + background: #fff; | ||
| 11 | + padding: 24px 34px; | ||
| 12 | + box-sizing: border-box; | ||
| 13 | + .course_name { | ||
| 14 | + font-size: 34px; | ||
| 15 | + font-weight: bold; | ||
| 16 | + } | ||
| 17 | + .course_info { | ||
| 18 | + font-size: 24px; | ||
| 19 | + color: #999; | ||
| 20 | + margin-top: 16px; | ||
| 21 | + } | ||
| 22 | + .address { | ||
| 23 | + font-size: 24px; | ||
| 24 | + color: #999; | ||
| 25 | + margin-top: 16px; | ||
| 26 | + width: 100%; | ||
| 27 | + height: 88px; | ||
| 28 | + line-height: 88px; | ||
| 29 | + background: url('../../../assets/service/address_bg.png') 100%/100% no-repeat; | ||
| 30 | + box-sizing: border-box; | ||
| 31 | + margin-top: 20px; | ||
| 32 | + display: flex; | ||
| 33 | + justify-content: space-between; | ||
| 34 | + align-items: center; | ||
| 35 | + padding: 0 20px; | ||
| 36 | + .icon { | ||
| 37 | + color: #333; | ||
| 38 | + // color: #000; | ||
| 39 | + } | ||
| 40 | + } | ||
| 41 | + .rate { | ||
| 42 | + margin-top: 20px; | ||
| 43 | + display: flex; | ||
| 44 | + justify-content: space-between; | ||
| 45 | + div > span { | ||
| 46 | + font-size: 30px; | ||
| 47 | + color: #ffcc00; | ||
| 48 | + margin-left: 30px; | ||
| 49 | + } | ||
| 50 | + > span { | ||
| 51 | + font-size: 26px; | ||
| 52 | + } | ||
| 7 | } | 53 | } |
| 8 | - .uni_text { | ||
| 9 | - width: 100%; | 54 | + .tag_box { |
| 55 | + padding-top: 10px; | ||
| 56 | + .tag { | ||
| 57 | + display: inline-block; | ||
| 58 | + margin-top: 10px; | ||
| 59 | + margin-right: 12px; | ||
| 60 | + color: #4092ff; | ||
| 61 | + font-size: 24px; | ||
| 62 | + border-radius: 8px; | ||
| 63 | + border: 2px solid #4092ff; | ||
| 64 | + padding: 2px 10px; | ||
| 65 | + } | ||
| 66 | + } | ||
| 67 | + } | ||
| 68 | + .content_box { | ||
| 69 | + position: relative; | ||
| 70 | + .content_all { | ||
| 71 | + overflow: hidden; | ||
| 72 | + font-size: 31px !important; | ||
| 73 | + line-height: 40px !important; | ||
| 74 | + letter-spacing: 1.6px; | ||
| 75 | + color: #666; | ||
| 76 | + img { | ||
| 77 | + display: block; | ||
| 78 | + max-width: 100%; | ||
| 79 | + margin: 0 auto; | ||
| 80 | + } | ||
| 81 | + &.active_box { | ||
| 82 | + white-space: nowrap; | ||
| 83 | + overflow: auto; | ||
| 84 | + &::-webkit-scrollbar { | ||
| 85 | + width: 0; | ||
| 86 | + } | ||
| 87 | + &::-webkit-scrollbar { | ||
| 88 | + display: none; | ||
| 89 | + } | ||
| 90 | + } | ||
| 91 | + .active_item { | ||
| 92 | + display: inline-block; | ||
| 93 | + width: 287px; | ||
| 94 | + cursor: pointer; | ||
| 10 | background: #fff; | 95 | background: #fff; |
| 11 | - padding: 24px 34px; | ||
| 12 | - box-sizing: border-box; | ||
| 13 | - .course_name { | ||
| 14 | - font-size: 34px; | ||
| 15 | - font-weight: bold; | 96 | + transition: 0.3s ease; |
| 97 | + margin-right: 14px; | ||
| 98 | + vertical-align: top; | ||
| 99 | + &:last-of-type { | ||
| 100 | + margin-right: 0; | ||
| 16 | } | 101 | } |
| 17 | - .course_info { | ||
| 18 | - font-size: 24px; | ||
| 19 | - color: #999; | ||
| 20 | - margin-top: 16px; | 102 | + .bg_box { |
| 103 | + width: 287px; | ||
| 104 | + height: 216px; | ||
| 105 | + background-size: cover; | ||
| 106 | + background-position: center; | ||
| 21 | } | 107 | } |
| 22 | - .address { | ||
| 23 | - font-size: 24px; | ||
| 24 | - color: #999; | ||
| 25 | - margin-top: 16px; | ||
| 26 | - width: 100%; | ||
| 27 | - height: 88px; | ||
| 28 | - line-height: 88px; | ||
| 29 | - background: url('../../../assets/service/address_bg.png') 100%/100% no-repeat; | ||
| 30 | - box-sizing: border-box; | ||
| 31 | - margin-top: 20px; | ||
| 32 | - display: flex; | ||
| 33 | - justify-content: space-between; | ||
| 34 | - align-items: center; | ||
| 35 | - padding: 0 20px; | ||
| 36 | - .icon { | ||
| 37 | - color: #333; | ||
| 38 | - // color: #000; | ||
| 39 | - } | 108 | + .text_box { |
| 109 | + padding: 10px; | ||
| 110 | + white-space: break-spaces; | ||
| 40 | } | 111 | } |
| 41 | - .rate { | ||
| 42 | - margin-top: 20px; | ||
| 43 | - display: flex; | ||
| 44 | - justify-content: space-between; | ||
| 45 | - div>span { | ||
| 46 | - font-size: 30px; | ||
| 47 | - color: #ffcc00; | ||
| 48 | - margin-left: 30px; | ||
| 49 | - } | ||
| 50 | - >span { | ||
| 51 | - font-size: 26px; | ||
| 52 | - } | 112 | + .tag { |
| 113 | + display: block; | ||
| 114 | + margin-top: 10px; | ||
| 115 | + // margin-right: 12px; | ||
| 116 | + font-size: 20px; | ||
| 117 | + line-height: 42px; | ||
| 118 | + color: #65768c; | ||
| 119 | + background: #f3f7fd; | ||
| 120 | + border-radius: 2px; | ||
| 121 | + padding: 0 10px; | ||
| 53 | } | 122 | } |
| 54 | - .tag_box { | ||
| 55 | - padding-top: 10px; | ||
| 56 | - .tag { | ||
| 57 | - display: inline-block; | ||
| 58 | - margin-top: 10px; | ||
| 59 | - margin-right: 12px; | ||
| 60 | - color: #4092ff; | ||
| 61 | - font-size: 24px; | ||
| 62 | - border-radius: 8px; | ||
| 63 | - border: 2px solid #4092ff; | ||
| 64 | - padding: 2px 10px; | ||
| 65 | - } | 123 | + .count_box { |
| 124 | + display: flex; | ||
| 125 | + justify-content: space-between; | ||
| 126 | + align-items: center; | ||
| 127 | + .count { | ||
| 128 | + color: #999999; | ||
| 129 | + font-size: 20px; | ||
| 130 | + } | ||
| 131 | + .reserve_btn { | ||
| 132 | + font-size: 22px; | ||
| 133 | + color: #f03c3c; | ||
| 134 | + } | ||
| 66 | } | 135 | } |
| 67 | - } | ||
| 68 | - .content_box { | ||
| 69 | - position: relative; | ||
| 70 | - .content_all { | ||
| 71 | - overflow: hidden; | ||
| 72 | - font-size: 31px !important; | ||
| 73 | - line-height: 40px !important; | ||
| 74 | - letter-spacing: 1.6px; | ||
| 75 | - color: #666; | ||
| 76 | - img { | ||
| 77 | - display: block; | ||
| 78 | - max-width: 100%; | ||
| 79 | - margin: 0 auto; | ||
| 80 | - } | ||
| 81 | - &.active_box { | ||
| 82 | - white-space: nowrap; | ||
| 83 | - overflow: auto; | ||
| 84 | - &::-webkit-scrollbar { | ||
| 85 | - width: 0; | ||
| 86 | - } | ||
| 87 | - &::-webkit-scrollbar { | ||
| 88 | - display: none; | ||
| 89 | - } | ||
| 90 | - } | ||
| 91 | - .active_item { | ||
| 92 | - display: inline-block; | ||
| 93 | - width: 287px; | ||
| 94 | - cursor: pointer; | ||
| 95 | - background: #fff; | ||
| 96 | - transition: 0.3s ease; | ||
| 97 | - margin-right: 14px; | ||
| 98 | - vertical-align: top; | ||
| 99 | - &:last-of-type { | ||
| 100 | - margin-right: 0; | ||
| 101 | - } | ||
| 102 | - .bg_box { | ||
| 103 | - width: 287px; | ||
| 104 | - height: 216px; | ||
| 105 | - background-size: cover; | ||
| 106 | - background-position: center; | ||
| 107 | - } | ||
| 108 | - .text_box { | ||
| 109 | - padding: 10px; | ||
| 110 | - white-space: break-spaces; | ||
| 111 | - } | ||
| 112 | - .tag { | ||
| 113 | - display: block; | ||
| 114 | - margin-top: 10px; | ||
| 115 | - // margin-right: 12px; | ||
| 116 | - font-size: 20px; | ||
| 117 | - line-height: 42px; | ||
| 118 | - color: #65768c; | ||
| 119 | - background: #f3f7fd; | ||
| 120 | - border-radius: 2px; | ||
| 121 | - padding: 0 10px; | ||
| 122 | - } | ||
| 123 | - .count_box { | ||
| 124 | - display: flex; | ||
| 125 | - justify-content: space-between; | ||
| 126 | - align-items: center; | ||
| 127 | - .count { | ||
| 128 | - color: #999999; | ||
| 129 | - font-size: 20px; | ||
| 130 | - } | ||
| 131 | - .reserve_btn { | ||
| 132 | - font-size: 22px; | ||
| 133 | - color: #f03c3c; | ||
| 134 | - } | ||
| 135 | - } | ||
| 136 | - .title { | ||
| 137 | - font-size: 28px; | ||
| 138 | - font-weight: bold; | ||
| 139 | - line-height: 40px; | ||
| 140 | - margin: 0; | ||
| 141 | - color: #000; | ||
| 142 | - white-space: initial; | ||
| 143 | - overflow: hidden; | ||
| 144 | - } | ||
| 145 | - } | ||
| 146 | - .teacher_box { | ||
| 147 | - .teacher_item { | ||
| 148 | - padding: 14px; | ||
| 149 | - width: 702px; | ||
| 150 | - height: 240px; | ||
| 151 | - background: #F9F9F9; | ||
| 152 | - border-radius: 20px; | ||
| 153 | - box-sizing: border-box; | ||
| 154 | - margin-bottom: 16px; | ||
| 155 | - } | ||
| 156 | - .teacher_img_box { | ||
| 157 | - width: 168px; | ||
| 158 | - height: 212px; | ||
| 159 | - border-radius: 12px; | ||
| 160 | - position: relative; | ||
| 161 | - overflow: hidden; | ||
| 162 | - float: left; | ||
| 163 | - margin-right: 18px; | ||
| 164 | - } | ||
| 165 | - .teacher_img { | ||
| 166 | - height: 100%; | ||
| 167 | - position: absolute; | ||
| 168 | - top: 0; | ||
| 169 | - left: 50%; | ||
| 170 | - transform: translate(-50%); | ||
| 171 | - max-width: initial; | ||
| 172 | - } | ||
| 173 | - .teacher_name { | ||
| 174 | - font-size: 30px; | ||
| 175 | - line-height: 42px; | ||
| 176 | - } | ||
| 177 | - .teacher_info { | ||
| 178 | - font-size: 26px; | ||
| 179 | - line-height: 36px; | ||
| 180 | - color: #999; | ||
| 181 | - margin-top: 4px; | ||
| 182 | - } | ||
| 183 | - .teacher_level { | ||
| 184 | - font-size: 24px; | ||
| 185 | - line-height: 34px; | ||
| 186 | - margin-top: 10px; | ||
| 187 | - } | ||
| 188 | - .teacher_location { | ||
| 189 | - font-size: 24px; | ||
| 190 | - line-height: 34px; | ||
| 191 | - margin-top: 10px; | ||
| 192 | - } | ||
| 193 | - } | 136 | + .title { |
| 137 | + font-size: 28px; | ||
| 138 | + font-weight: bold; | ||
| 139 | + line-height: 40px; | ||
| 140 | + margin: 0; | ||
| 141 | + color: #000; | ||
| 142 | + white-space: initial; | ||
| 143 | + overflow: hidden; | ||
| 194 | } | 144 | } |
| 195 | - } | ||
| 196 | - .tag_item { | ||
| 197 | - padding: 22px; | ||
| 198 | - .tag_title { | ||
| 199 | - font-size: 34px; | ||
| 200 | - font-weight: bold; | ||
| 201 | - margin-bottom: 32px; | 145 | + } |
| 146 | + .teacher_box { | ||
| 147 | + .teacher_item { | ||
| 148 | + padding: 14px; | ||
| 149 | + width: 702px; | ||
| 150 | + height: 240px; | ||
| 151 | + background: #f9f9f9; | ||
| 152 | + border-radius: 20px; | ||
| 153 | + box-sizing: border-box; | ||
| 154 | + margin-bottom: 16px; | ||
| 202 | } | 155 | } |
| 203 | - .tag_text { | ||
| 204 | - // font-size: 24px; | ||
| 205 | - // line-height: 40px; | ||
| 206 | - font-size: 28px !important; | ||
| 207 | - line-height: 44px !important; | ||
| 208 | - padding: 16px 0; | 156 | + .teacher_img_box { |
| 157 | + width: 168px; | ||
| 158 | + height: 212px; | ||
| 159 | + border-radius: 12px; | ||
| 160 | + position: relative; | ||
| 161 | + overflow: hidden; | ||
| 162 | + float: left; | ||
| 163 | + margin-right: 18px; | ||
| 209 | } | 164 | } |
| 210 | - } | ||
| 211 | - .top_border { | ||
| 212 | - border-top: 16px solid #f6f7fa; | ||
| 213 | - ::v-deep.van-tab { | ||
| 214 | - .van-tab__text { | ||
| 215 | - font-size: 34px !important; | ||
| 216 | - } | 165 | + .teacher_img { |
| 166 | + height: 100%; | ||
| 167 | + position: absolute; | ||
| 168 | + top: 0; | ||
| 169 | + left: 50%; | ||
| 170 | + transform: translate(-50%); | ||
| 171 | + max-width: initial; | ||
| 217 | } | 172 | } |
| 218 | - } | ||
| 219 | - .Collection { | ||
| 220 | - position: fixed; | ||
| 221 | - bottom: 0; | ||
| 222 | - left: 0; | ||
| 223 | - width: 100%; | ||
| 224 | - padding: 28px 22px; | ||
| 225 | - box-sizing: border-box; | ||
| 226 | - padding-bottom: 50px; | ||
| 227 | - z-index: 500; | ||
| 228 | - box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.34); | ||
| 229 | - .box { | ||
| 230 | - background: url(../../../assets/btn.png) 100%/100% no-repeat; | ||
| 231 | - width: 702px; | ||
| 232 | - height: 92px; | ||
| 233 | - .btn { | ||
| 234 | - display: inline-block; | ||
| 235 | - width: 50%; | ||
| 236 | - height: 100%; | ||
| 237 | - } | 173 | + .teacher_name { |
| 174 | + font-size: 30px; | ||
| 175 | + line-height: 42px; | ||
| 176 | + } | ||
| 177 | + .teacher_info { | ||
| 178 | + font-size: 26px; | ||
| 179 | + line-height: 36px; | ||
| 180 | + color: #999; | ||
| 181 | + margin-top: 4px; | ||
| 182 | + } | ||
| 183 | + .teacher_level { | ||
| 184 | + font-size: 24px; | ||
| 185 | + line-height: 34px; | ||
| 186 | + margin-top: 10px; | ||
| 187 | + } | ||
| 188 | + .teacher_location { | ||
| 189 | + font-size: 24px; | ||
| 190 | + line-height: 34px; | ||
| 191 | + margin-top: 10px; | ||
| 238 | } | 192 | } |
| 193 | + } | ||
| 239 | } | 194 | } |
| 240 | - .share_mask { | ||
| 241 | - width: 100%; | ||
| 242 | - height: 100%; | ||
| 243 | - position: fixed; | ||
| 244 | - top: 0; | ||
| 245 | - left: 0; | ||
| 246 | - background: rgba(0, 0, 0, 0.4); | ||
| 247 | - z-index: 999; | 195 | + } |
| 196 | + .tag_item { | ||
| 197 | + padding: 22px; | ||
| 198 | + .tag_title { | ||
| 199 | + font-size: 34px; | ||
| 200 | + font-weight: bold; | ||
| 201 | + margin-bottom: 32px; | ||
| 202 | + } | ||
| 203 | + .tag_text { | ||
| 204 | + // font-size: 24px; | ||
| 205 | + // line-height: 40px; | ||
| 206 | + font-size: 28px !important; | ||
| 207 | + line-height: 44px !important; | ||
| 208 | + padding: 16px 0; | ||
| 248 | } | 209 | } |
| 249 | - .share_des { | ||
| 250 | - position: absolute; | ||
| 251 | - top: 50px; | ||
| 252 | - right: 100px; | ||
| 253 | - width: 516px; | 210 | + } |
| 211 | + .top_border { | ||
| 212 | + border-top: 16px solid #f6f7fa; | ||
| 213 | + ::v-deep.van-tab { | ||
| 214 | + .van-tab__text { | ||
| 215 | + font-size: 34px !important; | ||
| 216 | + } | ||
| 217 | + } | ||
| 218 | + } | ||
| 219 | + .contact_btn { | ||
| 220 | + position: fixed; | ||
| 221 | + bottom: 36px; | ||
| 222 | + left: 15px; | ||
| 223 | + width: 720px; | ||
| 224 | + height: 92px; | ||
| 225 | + text-align: center; | ||
| 226 | + line-height: 92px; | ||
| 227 | + background: rgb(22, 190, 142); | ||
| 228 | + border-radius: 46px; | ||
| 229 | + font-size: 36px; | ||
| 230 | + color: #fff; | ||
| 231 | + } | ||
| 232 | + .Collection { | ||
| 233 | + position: fixed; | ||
| 234 | + bottom: 0; | ||
| 235 | + left: 0; | ||
| 236 | + width: 100%; | ||
| 237 | + padding: 28px 22px; | ||
| 238 | + box-sizing: border-box; | ||
| 239 | + padding-bottom: 50px; | ||
| 240 | + z-index: 500; | ||
| 241 | + box-shadow: 0px 4px 8px 0px rgba(0, 0, 0, 0.34); | ||
| 242 | + .box { | ||
| 243 | + background: url(../../../assets/btn.png) 100%/100% no-repeat; | ||
| 244 | + width: 702px; | ||
| 245 | + height: 92px; | ||
| 246 | + .btn { | ||
| 247 | + display: inline-block; | ||
| 248 | + width: 50%; | ||
| 249 | + height: 100%; | ||
| 250 | + } | ||
| 254 | } | 251 | } |
| 255 | -} | ||
| 256 | \ No newline at end of file | 252 | \ No newline at end of file |
| 253 | + } | ||
| 254 | + .share_mask { | ||
| 255 | + width: 100%; | ||
| 256 | + height: 100%; | ||
| 257 | + position: fixed; | ||
| 258 | + top: 0; | ||
| 259 | + left: 0; | ||
| 260 | + background: rgba(0, 0, 0, 0.4); | ||
| 261 | + z-index: 999; | ||
| 262 | + } | ||
| 263 | + .share_des { | ||
| 264 | + position: absolute; | ||
| 265 | + top: 50px; | ||
| 266 | + right: 100px; | ||
| 267 | + width: 516px; | ||
| 268 | + } | ||
| 269 | +} |
src/views/Service/BaseDetail/BaseDetail.vue
| @@ -36,12 +36,13 @@ | @@ -36,12 +36,13 @@ | ||
| 36 | </div> | 36 | </div> |
| 37 | <!-- 商品详情 --> | 37 | <!-- 商品详情 --> |
| 38 | <base-des v-if="detailData" :detailData="detailData"></base-des> | 38 | <base-des v-if="detailData" :detailData="detailData"></base-des> |
| 39 | - <div class="Collection"> | 39 | + <div class="contact_btn" @click="handleContact">联系客服</div> |
| 40 | + <!-- <div class="Collection"> | ||
| 40 | <div class="box"> | 41 | <div class="box"> |
| 41 | <div class="btn" @click="handleShare"></div> | 42 | <div class="btn" @click="handleShare"></div> |
| 42 | <div class="btn" @click="handleContact"></div> | 43 | <div class="btn" @click="handleContact"></div> |
| 43 | </div> | 44 | </div> |
| 44 | - </div> | 45 | + </div> --> |
| 45 | <div class="share_mask" v-if="showShareDes" @click="showShareDes = false"> | 46 | <div class="share_mask" v-if="showShareDes" @click="showShareDes = false"> |
| 46 | <img class="share_des" src="@/assets/home/share.png" alt="" /> | 47 | <img class="share_des" src="@/assets/home/share.png" alt="" /> |
| 47 | </div> | 48 | </div> |
| @@ -163,16 +164,25 @@ export default { | @@ -163,16 +164,25 @@ export default { | ||
| 163 | // 点击联系方式 | 164 | // 点击联系方式 |
| 164 | handleContact() { | 165 | handleContact() { |
| 165 | let mobile = this.detailData.mobile[0] | 166 | let mobile = this.detailData.mobile[0] |
| 167 | + | ||
| 166 | if (mobile) { | 168 | if (mobile) { |
| 167 | - // window.location.href = `tel:${mobile}` | ||
| 168 | - ZWJSBridge.phoneCall({ | ||
| 169 | - corpId: mobile, | 169 | + this.$dialog.confirm({ |
| 170 | + title: '提示', | ||
| 171 | + message: '是否拨打客服电话', | ||
| 170 | }) | 172 | }) |
| 171 | - .then((res) => { | ||
| 172 | - console.log(res) | 173 | + .then(() => { |
| 174 | + ZWJSBridge.phoneCall({ | ||
| 175 | + corpId: mobile, | ||
| 176 | + }) | ||
| 177 | + .then((res) => { | ||
| 178 | + console.log(res) | ||
| 179 | + }) | ||
| 180 | + .catch((err) => { | ||
| 181 | + console.log(err) | ||
| 182 | + }) | ||
| 173 | }) | 183 | }) |
| 174 | - .catch((err) => { | ||
| 175 | - console.log(err) | 184 | + .catch(() => { |
| 185 | + // on cancel | ||
| 176 | }) | 186 | }) |
| 177 | } else { | 187 | } else { |
| 178 | this.$toast('暂无联系方式') | 188 | this.$toast('暂无联系方式') |
| @@ -187,9 +197,14 @@ export default { | @@ -187,9 +197,14 @@ export default { | ||
| 187 | <style lang="scss"> | 197 | <style lang="scss"> |
| 188 | // 长辈版 | 198 | // 长辈版 |
| 189 | .elder { | 199 | .elder { |
| 190 | - .base_detail .tag_item .tag_text,.base_detail .uni_text .tag_box .tag,.base_detail .uni_text .address,.base_detail .content_box .content_all .teacher_box .teacher_name,.base_detail .content_box .content_all .teacher_box .teacher_level,.base_detail .content_box .content_all .teacher_box .teacher_info,.base_detail .content_box .content_all .teacher_box .teacher_location{ | 200 | + .base_detail .tag_item .tag_text, |
| 201 | + .base_detail .uni_text .tag_box .tag, | ||
| 202 | + .base_detail .uni_text .address, | ||
| 203 | + .base_detail .content_box .content_all .teacher_box .teacher_name, | ||
| 204 | + .base_detail .content_box .content_all .teacher_box .teacher_level, | ||
| 205 | + .base_detail .content_box .content_all .teacher_box .teacher_info, | ||
| 206 | + .base_detail .content_box .content_all .teacher_box .teacher_location { | ||
| 191 | font-size: 36px; | 207 | font-size: 36px; |
| 192 | } | 208 | } |
| 193 | - | ||
| 194 | } | 209 | } |
| 195 | -</style> | ||
| 196 | \ No newline at end of file | 210 | \ No newline at end of file |
| 211 | +</style> |