箭头等缺陷修改

src/jfw/modules/app/src/web/staticres/jyapp/vipsubscribe/css/choose_area_new.css

@@ -1,608 +1,619 @@
 @charset "UTF-8";
 .main {
-  width: 100%;
-  overflow: scroll;
+    width: 100%;
+    overflow: scroll;
 }
 
 .main::-webkit-scrollbar {
-  display: none;
+    display: none;
 }
 
 .layout_top-bottom {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
 }
 
 .layout_top-bottom .layou_top {
-  flex: 1;
-  overflow: scroll;
+    flex: 1;
+    overflow: scroll;
 }
 
 .bottom_button {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  height: .94rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: .94rem;
 }
 
 .bottom_button .left_btn,
 .bottom_button .right_btn {
-  flex: 1;
-  height: 100%;
-  font-size: .34rem;
+    flex: 1;
+    height: 100%;
+    font-size: .34rem;
 }
 
 .bottom_button .left_btn {
-  color: #2cb7ca;
-  background-color: #fff;
-  border-top: 1px solid #e0e0e0;
+    color: #2cb7ca;
+    background-color: #fff;
+    border-top: 1px solid #e0e0e0;
 }
 
 .bottom_button .right_btn {
-  color: #fff;
-  background-color: #2cb7ca;
-  border-top: 1px solid #2cb7ca;
+    color: #fff;
+    background-color: #2cb7ca;
+    border-top: 1px solid #2cb7ca;
 }
 
 .bottom_button button[disabled] {
-  opacity: .5;
+    opacity: .5;
 }
 
 .public_btn {
-  width: 100%;
-  height: .94rem;
-  line-height: .94rem;
-  text-align: center;
-  background: #2CB7CA;
-  color: #fff;
-  border-radius: 0.06rem;
-  font-size: .34rem;
+    width: 100%;
+    height: .94rem;
+    line-height: .94rem;
+    text-align: center;
+    background: #2CB7CA;
+    color: #fff;
+    border-radius: 0.06rem;
+    font-size: .34rem;
 }
 
 .tips_btn {
-  display: flex;
-  position: relative;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
 }
 
 .tips_btn .tips_discount {
-  width: 100%;
+    width: 100%;
 }
 
 .tips_btn .tips_discount .tips_d_money {
-  display: none;
-  position: absolute;
-  left: 50%;
-  top: -.2rem;
-  padding: 0 .4rem;
-  height: .64rem;
-  line-height: .64rem;
-  color: #2CB7CA;
-  font-size: .32rem;
-  background-color: #fff;
-  border-radius: .32rem;
-  transform: translate(-50%, -100%);
-  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+    display: none;
+    position: absolute;
+    left: 50%;
+    top: -.2rem;
+    padding: 0 .4rem;
+    height: .64rem;
+    line-height: .64rem;
+    color: #2CB7CA;
+    font-size: .32rem;
+    background-color: #fff;
+    border-radius: .32rem;
+    transform: translate(-50%, -100%);
+    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
 }
 
 .tips_btn .tips_discount .tips_d_text {
-  display: none;
-  height: .72rem;
-  line-height: .72rem;
-  color: #fff;
-  font-size: .28rem;
-  text-align: center;
-  background-color: #FFB901;
+    display: none;
+    height: .72rem;
+    line-height: .72rem;
+    color: #fff;
+    font-size: .28rem;
+    text-align: center;
+    background-color: #FFB901;
 }
 
 .tips_btn .btns {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: .94rem;
-  line-height: .94rem;
-  color: #fff;
-  font-size: .34rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: .94rem;
+    line-height: .94rem;
+    color: #fff;
+    font-size: .34rem;
 }
 
 .tips_btn .btns .save-btn,
 .tips_btn .btns .reset-btn {
-  flex: 1;
-  width: 50%;
-  text-align: center;
-  height: 100%;
-  font-size: .34rem;
+    flex: 1;
+    width: 50%;
+    text-align: center;
+    height: 100%;
+    font-size: .34rem;
 }
 
 .tips_btn .btns .reset-btn {
-  background: #fff;
-  color: #2cb7ca;
-  border-top: 1px solid #e0e0e0;
+    background: #fff;
+    color: #2cb7ca;
+    border-top: 1px solid #e0e0e0;
 }
 
 .tips_btn .btns .save-btn {
-  background: #2cb7ca;
-  color: #fff;
-  border-top: 1px solid #2cb7ca;
+    background: #2cb7ca;
+    color: #fff;
+    border-top: 1px solid #2cb7ca;
 }
 
 .tips_btn .btns button[disabled] {
-  opacity: .5;
+    opacity: .5;
 }
 
 .jy_icon {
-  position: relative;
-  width: 100%;
-  height: 100%;
+    position: relative;
+    width: 100%;
+    height: 100%;
 }
 
 .jy_icon.decrease:before,
 .jy_icon.increase:before,
 .jy_icon.increase:after {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  content: '';
-  width: 0.4rem;
-  height: 0.04rem;
-  background-color: #686868;
-  transform: translate(-50%, -50%);
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    content: '';
+    width: 0.4rem;
+    height: 0.04rem;
+    background-color: #686868;
+    transform: translate(-50%, -50%);
 }
 
 .jy_icon.increase:after {
-  transform: translate(-50%, -50%) rotate(90deg);
+    transform: translate(-50%, -50%) rotate(90deg);
 }
 
 /*禁止长按复制 加给body*/
 .no-touch {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 
 /* 弹性盒子布局 */
 .flex_alginC {
-  display: flex;
-  align-items: center;
+    display: flex;
+    align-items: center;
 }
 
 .flex_alginC_justB {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }
 
 .flex_alginC_justC {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .flex_column {
-  display: flex;
-  flex-direction: column;
+    display: flex;
+    flex-direction: column;
 }
 
 .flex_column_alignC {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 /* 自定义弹窗*/
 @-webkit-keyframes c {
-  0% {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+    0% {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }
 
 @keyframes c {
-  0% {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+    0% {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }
 
 .custom-dialog .weui-animate-fade-in {
-  -webkit-animation: c ease 0s forwards;
-  animation: c ease 0s forwards;
+    -webkit-animation: c ease 0s forwards;
+    animation: c ease 0s forwards;
 }
 
 @-webkit-keyframes d {
-  0% {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
+    0% {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
 }
 
 @keyframes d {
-  0% {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
+    0% {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
 }
 
 .custom-dialog .weui-animate-fade-out {
-  -webkit-animation: d ease 0s forwards;
-  animation: d ease 0s forwards;
+    -webkit-animation: d ease 0s forwards;
+    animation: d ease 0s forwards;
 }
 
 .custom-dialog .weui-dialog__hd {
-  background: #F5F4F9;
-  padding: .17rem 0;
-  color: #000;
-  font-size: .34rem;
-  text-align: center;
+    background: #F5F4F9;
+    padding: .17rem 0;
+    color: #000;
+    font-size: .34rem;
+    text-align: center;
 }
 
 .custom-dialog .weui-dialog__bd {
-  padding: .37rem 0;
-  color: #1D1D1D;
-  font-size: .32rem;
-  text-align: center;
+    padding: .37rem 0;
+    color: #1D1D1D;
+    font-size: .32rem;
+    text-align: center;
 }
 
 .custom-dialog .weui-dialog__ft:after {
-  border: 0;
+    border: 0;
 }
 
 .custom-dialog .weui-dialog__btn:after {
-  border: 0;
+    border: 0;
 }
 
 .custom-dialog .weui-dialog__ft {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-bottom: .38rem;
-  box-sizing: border-box;
-  text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-bottom: .38rem;
+    box-sizing: border-box;
+    text-align: center;
 }
 
 .custom-dialog .weui-dialog__btn {
-  display: block;
-  width: 1.72rem;
-  height: .72rem;
-  line-height: .72rem;
-  color: #fff;
-  padding: 0;
-  flex: none;
-  text-align: center;
-  border-radius: 3px;
+    display: block;
+    width: 1.72rem;
+    height: .72rem;
+    line-height: .72rem;
+    color: #fff;
+    padding: 0;
+    flex: none;
+    text-align: center;
+    border-radius: 3px;
 }
 
 .custom-dialog .weui-dialog__btn_primary {
-  background-color: #2CB7CA;
-  margin-right: 1rem;
+    background-color: #2CB7CA;
+    margin-right: 1rem;
 }
 
 .custom-dialog .weui-dialog__btn_default {
-  background-color: #BFBFC3;
+    background-color: #BFBFC3;
 }
 
 /* 自定义switch按钮 */
 .custom-switch {
-  position: relative;
-  width: 52px;
-  height: 32px;
-  border: 1px solid #dfdfdf;
-  outline: 0;
-  border-radius: 16px;
-  box-sizing: border-box;
-  background-color: #dfdfdf;
-  -webkit-transition: background-color .1s,border .1s;
-  transition: background-color .1s,border .1s;
-  -webkit-appearance: none;
+    position: relative;
+    width: 52px;
+    height: 32px;
+    border: 1px solid #dfdfdf;
+    outline: 0;
+    border-radius: 16px;
+    box-sizing: border-box;
+    background-color: #dfdfdf;
+    -webkit-transition: background-color .1s, border .1s;
+    transition: background-color .1s, border .1s;
+    -webkit-appearance: none;
 }
 
 .custom-switch:before {
-  content: " ";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 50px;
-  height: 30px;
-  border-radius: 15px;
-  background-color: #fdfdfd;
-  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
-  transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
-  transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
-  transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1), -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
+    content: " ";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 50px;
+    height: 30px;
+    border-radius: 15px;
+    background-color: #fdfdfd;
+    -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
+    transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
+    transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
+    transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1), -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
 }
 
 .custom-switch:after {
-  content: " ";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 30px;
-  height: 30px;
-  border-radius: 15px;
-  background-color: #fff;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
-  transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
-  transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
-  transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35), -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
+    content: " ";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 30px;
+    height: 30px;
+    border-radius: 15px;
+    background-color: #fff;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+    -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
+    transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
+    transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
+    transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35), -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
 }
 
 .custom-switch.checked {
-  border-color: #04be02;
-  background-color: #04be02;
+    border-color: #04be02;
+    background-color: #04be02;
 }
 
 .custom-switch.checked:before {
-  transform: scale(0);
+    transform: scale(0);
 }
 
 .custom-switch.checked:after {
-  transform: translateX(20px);
+    transform: translateX(20px);
 }
 
 .custom-toast .weui-toast {
-  font-size: .3rem;
-  padding: 0.2rem;
-  width: auto;
-  max-width: 6rem;
-  min-height: 0;
-  height: auto;
-  top: 50%;
-  left: 50%;
-  margin-left: 0;
-  margin-top: -0.47rem;
-  transform: translateX(-50%) translateY(-50%);
+    font-size: .3rem;
+    padding: 0.2rem;
+    width: auto;
+    max-width: 6rem;
+    min-height: 0;
+    height: auto;
+    top: 50%;
+    left: 50%;
+    margin-left: 0;
+    margin-top: -0.47rem;
+    transform: translateX(-50%) translateY(-50%);
 }
 
 .custom-toast .weui-icon_toast {
-  display: none;
+    display: none;
 }
 
 .custom-toast .weui-toast__content {
-  margin: 0;
+    margin: 0;
 }
 
 .jymobile-tab-triangle {
-  position: relative;
+    position: relative;
 }
 
 .jymobile-tab-triangle:after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  right: 0;
-  width: 0;
-  height: 0;
-  font-size: 0;
-  line-height: 0;
-  border-style: solid;
-  border-width: .1rem;
-  border-color: #aaa transparent transparent transparent;
-  transform: translate(140%, -30%);
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: 0;
+    width: 0;
+    height: 0;
+    font-size: 0;
+    line-height: 0;
+    border-style: solid;
+    border-width: .1rem;
+    border-color: #aaa transparent transparent transparent;
+    transform: translate(140%, -30%);
 }
 
 .jymobile-tab-triangle.active:after {
-  border-color: transparent transparent #2cb7ca transparent;
-  transform: translate(140%, -70%);
+    border-color: transparent transparent #2cb7ca transparent;
+    transform: translate(140%, -70%);
 }
 
 .jymobile-tab-triangle.current {
-  color: #2cb7ca;
+    color: #2cb7ca;
 }
 
 .jymobile-tab-triangle.current:after {
-  border-color: #2cb7ca transparent transparent transparent;
+    border-color: #2cb7ca transparent transparent transparent;
 }
 
 #choose_area {
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-  overflow: hidden;
-  height: 100%;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    overflow: hidden;
+    height: 100%;
 }
 
 #choose_area .form {
-  flex: 1;
-  overflow-y: scroll;
+    flex: 1;
+    overflow-y: scroll;
 }
 
 #choose_area .optional_count, #choose_area .all_area {
-  height: .88rem;
-  line-height: .88rem;
-  padding: 0 .3rem;
-  font-size: .3rem;
-  color: #1d1d1d;
+    height: .88rem;
+    line-height: .88rem;
+    padding: 0 .3rem;
+    font-size: .3rem;
+    color: #1d1d1d;
 }
 
 #choose_area .optional_count em, #choose_area .all_area em {
-  color: #2cb7ca;
+    color: #2cb7ca;
 }
 
 #choose_area .result {
-  position: relative;
-  padding: .2rem .3rem;
-  font-size: .26rem;
-  text-align: justify;
+    position: relative;
+    padding: .2rem .3rem;
+    font-size: .26rem;
+    text-align: justify;
 }
 
 #choose_area .result .result_text {
-  position: relative;
-  min-height: 19px;
+    position: relative;
+    min-height: 19px;
 }
 
 #choose_area .result .line_two {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
 }
 
 #choose_area .result .detail, #choose_area .result .packup {
-  display: inline-block;
-  width: 1.5rem;
-  padding-right: 0.1rem;
-  text-align: right;
-  color: #2cb7ca;
-  font-size: .26rem;
-  z-index: 999;
+    display: inline-block;
+    width: 1.5rem;
+    padding-right: 0.1rem;
+    text-align: right;
+    color: #2cb7ca;
+    font-size: .26rem;
+    z-index: 999;
 }
 
 #choose_area .result .detail {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(90deg, rgba(245, 244, 249, 0) 0%, rgba(245, 244, 249, 0.96) 36%, #f5f4f9 100%);
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(90deg, rgba(245, 244, 249, 0) 0%, rgba(245, 244, 249, 0.96) 36%, #f5f4f9 100%);
 }
 
 #choose_area .result .packup {
-  position: absolute;
-  right: 0.3rem;
-  bottom: 0;
-  margin-top: .1rem;
+    position: absolute;
+    right: 0.3rem;
+    bottom: 0;
+    margin-top: .1rem;
 }
 
 #choose_area .select-area-box {
-  padding-bottom: .94rem;
+    padding-bottom: .94rem;
 }
 
 #choose_area .select-area-box .tab {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  color: #1d1d1d;
-  background: #fff;
-  font-size: .3rem;
-  padding: .2rem .5rem;
-  border-bottom: 1px solid #e0e0e0;
-  box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: #1d1d1d;
+    background: #fff;
+    font-size: .3rem;
+    padding: .2rem .5rem;
+    border-bottom: 1px solid #e0e0e0;
+    box-sizing: border-box;
 }
 
 #choose_area .select-area-box .tab .province {
-  display: flex;
-  align-items: center;
+    display: flex;
+    align-items: center;
 }
 
 #choose_area .select-area-box .tab .province .checkbox {
-  width: .4rem;
-  height: .4rem;
-  border: 1px solid #ddd;
-  border-radius: 50%;
-  margin-right: .2rem;
-  -webkit-appearance: none;
-  background: #fff;
+    width: .4rem;
+    height: .4rem;
+    border: 1px solid #ddd;
+    border-radius: 50%;
+    margin-right: .2rem;
+    -webkit-appearance: none;
+    background: #fff;
 }
 
 #choose_area .select-area-box .tab .province .checkbox:checked {
-  border: 0;
-  background: url(/jyapp/vipsubscribe/image/xuanzhong.png) no-repeat center center;
-  background-size: 100% 100%;
+    border: 0;
+    background: url(/jyapp/vipsubscribe/image/xuanzhong.png) no-repeat center center;
+    background-size: 100% 100%;
 }
 
 #choose_area .select-area-box .tab .province .checkbox[disabled] {
-  border: 0;
-  background: url(/jyapp/vipsubscribe/image/active_disabled.png) no-repeat center center;
-  background-size: 100% 100%;
+    border: 0;
+    background: url(/jyapp/vipsubscribe/image/active_disabled.png) no-repeat center center;
+    background-size: 100% 100%;
+    opacity: 1;
 }
 
 #choose_area .select-area-box .tab .province .checkbox.half {
-  border: 0 !important;
-  background: url(/jyapp/vipsubscribe/image/banxuan.png) no-repeat center center !important;
-  background-size: cover !important;
+    border: 0 !important;
+    background: url(/jyapp/vipsubscribe/image/banxuan.png) no-repeat center center !important;
+    background-size: cover !important;
 }
 
 #choose_area .select-area-box .tab .province .checkbox.half[disabled] {
-  border: 0 !important;
-  background: url(/jyapp/vipsubscribe/image/banxuan.png) no-repeat center center !important;
-  background-size: cover !important;
+    border: 0 !important;
+    background: url(/jyapp/vipsubscribe/image/banxuan.png) no-repeat center center !important;
+    background-size: cover !important;
+    opacity: 1 !important;
 }
 
 #choose_area .select-area-box .tab .optional {
-  color: #2CB7CA;
-  font-size: 0.28rem;
-  margin-left: -2.8rem;
+    color: #2CB7CA;
+    font-size: 0.28rem;
+    margin-left: -2.8rem;
 }
 
 #choose_area .select-area-box label::after {
-  font-size: 14px;
-  float: right;
-  margin-right: 15px;
+    font-size: 14px;
+    float: right;
+    margin-right: 15px;
 }
 
 #choose_area .select-area-box .tab_content {
-  display: none;
-  font-size: .28rem;
-  padding: .1rem .3rem;
-  text-align: center;
+    display: none;
+    font-size: .28rem;
+    padding: .1rem .3rem;
+    text-align: center;
 }
 
 #choose_area .select-area-box .tab_content .city {
-  float: left;
-  padding: .1rem .2rem;
-  background: #fff;
-  margin: .1rem 0 .1rem .1rem;
-  border-radius: 0.04rem;
-  font-size: .28rem;
+    float: left;
+    padding: .1rem .2rem;
+    background: #fff;
+    margin: .1rem 0 .1rem .1rem;
+    border-radius: 0.04rem;
+    font-size: .28rem;
 }
 
 #choose_area .select-area-box .tab_content .active {
-  background: #2cb7ca;
-  color: #fff;
+    background: #2cb7ca;
+    color: #fff;
 }
 
 #choose_area .select-area-box .tab_content .active[disabled] {
-  background: #BFBFC3;
-  color: #fff;
+    background: #BFBFC3;
+    color: #fff;
 }
 
 #choose_area .select-area-box .tab_content .city[disabled] {
-  background: #BFBFC3;
-  color: #fff;
+    background: #BFBFC3;
+    color: #fff;
 }
 
 #choose_area .select-area-box .index {
-  padding: .3rem .3rem .1rem .3rem;
-  font-size: .32rem;
+    padding: .3rem .3rem .1rem .3rem;
+    font-size: .32rem;
 }
 
 #choose_area .slide {
-  background: transparent;
-  position: fixed;
-  right: 0;
-  top: 50%;
-  height: 8.5rem;
-  width: .4rem;
-  font-size: .26rem;
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: .1rem 0;
-  align-items: center;
-  margin-top: -4.25rem;
-  z-index: 9999;
+    background: transparent;
+    position: fixed;
+    right: 0;
+    top: 50%;
+    height: 8.5rem;
+    width: .4rem;
+    font-size: .26rem;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: .1rem 0;
+    align-items: center;
+    margin-top: -4.25rem;
+    z-index: 9999;
 }
 
 #choose_area .slide a {
-  margin-bottom: .1rem;
+    margin-bottom: .1rem;
+}
+
+.icon.iconfont {
+    display: inline-block;
 }
+
+.icon.iconfont.up {
+    display: inline-block;
+    transform: rotate(-180deg);
+}

src/jfw/modules/app/src/web/staticres/jyapp/vipsubscribe/js/editArea.js

@@ -54,18 +54,28 @@ function createMoreCity(arr) {
     return tempHtml
 }
 
+var animatedRuning = false;
+
+function checkAnimatedRuning() {
+    if (animatedRuning) {
+        return true
+    }
+    animatedRuning = true;
+    setTimeout(function () {
+        animatedRuning = false;
+    }, 500);
+    return false
+}
+
 // 省下拉市事件
 function slideFun(obj) {
+    if (checkAnimatedRuning()) {
+        return
+    }
     if (obj.next('.tab_content:not(:animated)').css("display") == "block") {
-        obj.children().children('i').css({
-            "display": "inline-block",
-            "transform": "rotate(0)"
-        })
+        obj.children().children('i').removeClass("up");
     } else {
-        obj.children().children('i').css({
-            "display": "inline-block",
-            "transform": "rotate(-180deg)"
-        })
+        obj.children().children('i').addClass("up");
     }
     obj.toggleClass('selected').next('.tab_content:not(:animated)').slideToggle(500)
     obj.parent().siblings().children('.tab').removeClass('selected');
@@ -169,7 +179,7 @@ function initResult() {
                     // 如果购买的是全省，则不可点击下拉事件（不可修改城市）
                     if (isAll != -1) {
                         $(this).parent().siblings().children('.city').addClass('active').attr('disabled', true);
-                        $(this).parent('.tab').parent('li').siblings().find('.checkbox:not(.half)').parents('.tab').unbind('click')
+                        $(this).parent('.tab').unbind('click').parent('li').siblings().find('.checkbox:not(.half)').parents('.tab').unbind('click')
                     } else {
                         $(this).parent().siblings().children('.city').addClass('active').removeAttr('disabled')
                     }
@@ -189,7 +199,7 @@ function initResult() {
                         that.bind('click', function () {
                             slideFun($(this));
                         })
-                        $(this).addClass('active').parent().siblings('.tab').find('input').addClass('half');
+                        $(this).addClass('active').removeAttr('disabled').parent().siblings('.tab').find('input').addClass('half');
                         return;
                     }
                 })
@@ -233,18 +243,15 @@ function initResult() {
 $(function () {
     // 省下拉事件
     $('.tab:not(.municipality)').on('click', function () {
+        if (checkAnimatedRuning()) {
+            return
+        }
         if ($(this).next('.tab_content:not(:animated)').css("display") == "block") {
-            $(this).children().children('i').css({
-                "display": "inline-block",
-                "transform": "rotate(0)"
-            })
+            $(this).children().children('i').removeClass("up");
         } else {
-            $(this).children().children('i').css({
-                "display": "inline-block",
-                "transform": "rotate(-180deg)"
-            })
+            $(this).children().children('i').addClass("up");
         }
-        $(this).toggleClass('selected').next('.tab_content:not(:animated)').slideToggle(500)
+        $(this).toggleClass('selected').next('.tab_content:not(:animated)').slideToggle(500);
         $(this).parent().siblings().children('.tab').removeClass('selected');
     });
     getData();
@@ -358,7 +365,8 @@ $(function () {
         $('.checkbox').prop('checked', false).removeAttr('disabled');
         $('.city').removeClass('active');
         $('.tab_content').slideUp();
-        $('.optional').remove()
+        $('.optional').remove();
+        $('.tab').find('i').removeClass("up");
         init();
     })
     // 确定修改事件
@@ -380,4 +388,4 @@ function theSameAs(select) {
     let tmp1 = getAreaClassArr(select);
     let tmp2 = getAreaClassArr(areaData.data.area);
     return (JSON.stringify(tmp1[0].sort()) === JSON.stringify(tmp2[0].sort())) && (JSON.stringify(tmp1[1].sort()) === JSON.stringify(tmp2[1].sort()));
-}
+}

src/jfw/modules/app/src/web/templates/vipsubscribe/choose_area.html

@@ -658,6 +658,9 @@
                 document.querySelector('#' + s).scrollIntoView({block: 'center'});
             })
             $(".select-area-box .tab:not(.municipality)").on('click', function (event) {
+                if (AreaChoose.checkAnimatedRuning()) {
+                    return
+                }
                 if ($(this).next('.tab_content:not(:animated)').css("display") == "block") {
                     $(this).children().children('i').css({
                         "display": "inline-block",
@@ -766,6 +769,17 @@
                 $('.tips_d_money').text('￥' + price);
             }
 
+        },
+        animatedRuning: false,
+        checkAnimatedRuning: function () {
+            if (AreaChoose.animatedRuning) {
+                return true
+            }
+            AreaChoose.animatedRuning = true;
+            setTimeout(function () {
+                AreaChoose.animatedRuning = false;
+            }, 500);
+            return false
         }
     };
 

src/web/staticres/css/subscribe.css

@@ -0,0 +1,407 @@
+/* banner图板块 */
+.tender-1{
+    width: 100%;
+    height: 475px;
+}
+.tender-1 .imgauto{
+    width: 100%;
+    height: 100%;
+    /* margin: 0 auto; */
+}
+.tender-1 .imgauto img{
+    width: 100%;
+    z-index: 1;
+}
+
+/* 订阅模式选择板块 */
+
+.subscription{
+    width: 100%;
+    height: 268px;
+    margin-top: 30px;
+}
+.subscription .sub-center{
+    width: 840px;
+    height: 268px;
+    margin: 0 auto;
+    display: flex;
+}
+.subscription .sub-center .sub-free{
+    width: 354px;
+    height: 214px;
+    padding: 27px;
+    background: url('/images/subscribe/free.png') no-repeat;
+}
+.subscription .sub-center .sub-free .free-title{
+    width: 100%;
+    height: 26px;
+    margin-top: 28px;
+    text-align: center;
+    font-size:20px;
+    font-family:Microsoft YaHei;
+    font-weight:400;
+    line-height:26px;
+    color:rgba(255,255,255,1);
+    opacity:1;
+}
+.subscription .sub-center .sub-free .free-btn{
+    width:180px;
+    height:46px;
+    background:rgba(44,183,202,1);
+    opacity:1;
+    border-radius:6px;
+    margin: 76px auto;
+    display: block;
+    text-align: center;
+    font-size:18px;
+    font-family:Microsoft YaHei;
+    font-weight:400;
+    line-height:46px;
+    color:rgba(255,255,255,1);
+    opacity:1;
+}
+.subscription .sub-center .sub-vip{
+    width: 354px;
+    height: 214px;
+    padding: 27px;
+    background: url('/images/subscribe/vip.png') no-repeat;
+}
+
+.subscription .sub-center .sub-vip .vip-logo{
+    width: 100%;
+    height: 38px;
+    margin-top: 22px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.subscription .sub-center .sub-vip .vip-logo img{
+    width: 38px;
+    height: 38px;
+    margin-right: 10px;
+}
+.subscription .sub-center .sub-vip .vip-logo .vip-title{
+    font-size:20px;
+    font-family:Microsoft YaHei;
+    font-weight:400;
+    line-height:26px;
+    color:rgba(255,218,177,1);
+    opacity:1;
+}
+.subscription .sub-center .sub-vip .vip-btn{
+    width:180px;
+    height:46px;
+    background:rgba(52,53,90,1);
+    margin: 69px auto;
+    opacity:1;
+    border-radius:6px;
+    display: block;
+    text-align: center;
+    font-size:18px;
+    font-family:Microsoft YaHei;
+    font-weight:400;
+    line-height:46px;
+    color:rgba(255,218,177,1);
+}
+/* 订阅模式对比板块 */
+.sub-contrast{
+    width: 100%;
+    height: 666px;
+    margin-top: 79px;
+}
+.sub-contrast .contrast-header{
+    width: 100%;
+    height: 31px;
+}
+.sub-contrast .contrast-header .header-title{
+    width: 331px;
+    height: 31px;
+    line-height: 31px;
+    margin: 0 auto;
+    background: url('/images/subscribe/line.png') no-repeat;
+    font-size:24px;
+    font-family:Microsoft YaHei;
+    font-weight:400;
+    color:rgba(29,29,29,1);
+    opacity:1;
+    text-align: center;
+    background-position: center;
+}
+.sub-contrast .contrast-main{
+    width: 100%;
+    height: 422px;
+    margin-top: 85px;
+}
+.sub-contrast .contrast-main .contrast-main-center{
+    width: 960px;
+    height: 422px;
+    margin: 0 auto;
+    display: flex;
+    border: 1px solid rgba(224,224,224,1);
+}
+/* 功能/价格 */
+/* li+li表示选中除第一个li其他所有的li */
+.sub-contrast .contrast-main .contrast-main-center .center-left{
+    width: 201px;
+    height: 422px;
+}
+.sub-contrast .contrast-main .contrast-main-center .center-left>ul{
+    width: 201px;
+    height: 422px;
+    margin: 0;
+}
+.sub-contrast .contrast-main .contrast-main-center .center-left>ul li+li{
+    width: 200px;
+    height: 58px;
+    text-align: center;
+    line-height: 60px;
+    font-size:16px;
+    font-family:Microsoft YaHei;
+    font-weight:400;
+    color:rgba(29,29,29,1);
+    opacity:1;
+    border-bottom: 1px solid rgba(224,224,224,1);
+    border-right: 1px solid rgba(224,224,224,1);
+}
+/* 免费版 */
+.sub-contrast .contrast-main .contrast-main-center .center-center{
+    width: 259px;
+    height: 422px;
+    transition:all 0.5s;
+}
+.sub-contrast .contrast-main .contrast-main-center .center-center>ul{
+    width: 259px;
+    transition:all 0.5s;
+    height: 422px;
+    margin: 0;
+}
+
+.sub-contrast .contrast-main .contrast-main-center .center-center>ul li+li{
+    transition:all 0.5s;
+    width: 258px;
+    height: 58px;
+    text-align: center;
+    line-height: 60px;
+    font-size:16px;
+    font-family:Microsoft YaHei;
+    font-weight:400;
+    color:rgba(29,29,29,1);
+    opacity:1;
+    border-bottom: 1px solid rgba(224,224,224,1);
+    border-right: 1px solid rgba(224,224,224,1);
+}
+.sub-contrast .contrast-main .contrast-main-center .center-center>ul li:nth-child(7){
+    background-color: rgba(246, 246, 246, 1);
+    border-right: 1px solid rgba(224,224,224,1) ;
+    display: flex;
+    transition:all 0.5s;
+    justify-content: center;
+    align-items: center;
+}
+.sub-contrast .contrast-main .contrast-main-center .center-center ul li:nth-child(7) .btn-free{
+    display: block;
+    cursor: pointer;
+    transition:all 0.5s;
+    width:90px;
+    height:30px;
+    background:rgba(246,246,246,1);
+    opacity:1;
+    border-radius:4px;
+    font-size:16px;
+    font-family:Microsoft YaHei;
+    font-weight:400;
+    line-height:26px;
+    color:rgba(104,104,104,1);
+}
+/* 免费版滑过特效 */
+.sub-contrast .contrast-main .contrast-main-center .center-center:hover ul{
+    height: 463px;
+    /* transform: scaleY(1.1); */
+    transition: 0.5s;
+    box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
+    margin-top: -22px;
+}
+.sub-contrast .contrast-main .contrast-main-center .center-center:hover ul .modify-center{
+    height: 90px;
+    line-height: 90px;
+    transition: 0.5s;
+}
+.sub-contrast .contrast-main .contrast-main-center .center-center:hover ul li:nth-child(7){
+    height: 80px;
+    width: 258px;
+    transition: 0.5s;
+    line-height: 80px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.sub-contrast .contrast-main .contrast-main-center .center-center:hover ul li:nth-child(7) .btn-free{
+    transition: 0.5s;
+    background:rgba(44,183,202,1);
+    color: white;
+}
+/* VIP订阅专属服务 */
+.sub-contrast .contrast-main .contrast-main-center .center-right{
+    width: 500px;
+    height: 422px;
+    transition:all 0.5s;
+}
+.sub-contrast .contrast-main .contrast-main-center .center-right>ul{
+    width: 500px;
+    height: 422px;
+    margin: 0;
+    transition:all 0.5s;
+}
+.sub-contrast .contrast-main .contrast-main-center .center-right>ul li+li{
+    width: 500px;
+    height: 58px;
+    text-align: center;
+    transition:all 0.5s;
+    line-height: 60px;
+    font-size:16px;
+    font-family:Microsoft YaHei;
+    font-weight:400;
+    color:rgba(29,29,29,1);
+    opacity:1;
+    border-bottom: 1px solid rgba(224,224,224,1);
+}
+.sub-contrast .contrast-main .contrast-main-center .center-right>ul li:nth-child(7){
+    background-color: #FBF2EA;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition:all 0.5s;
+}
+.sub-contrast .contrast-main .contrast-main-center .center-right>ul li:nth-child(7) .On-trial{
+    width:90px;
+    height:30px;
+    border:1px solid rgba(207,173,137,1);
+    transition:all 0.5s;
+    opacity:1;
+    border-radius:4px;
+    display: block;
+    text-align: center;
+    line-height: 30px;
+    font-size:14px;
+    font-family:MicrosoftYaHei;
+    color:rgba(207,173,137,1);
+    margin-left: 16px;
+}
+/* VIP订阅滑过特效 */
+.sub-contrast .contrast-main .contrast-main-center .center-right:hover ul{
+    height: 463px;
+    margin-top: -22px;
+    box-shadow: 0px 0px 20px rgba(0,0,0,0.2);
+    transition:all 0.5s;
+}
+.sub-contrast .contrast-main .contrast-main-center .center-right:hover ul .modify-right{
+    height: 90px;
+    line-height: 90px;
+    transition:all 0.5s;
+}
+.sub-contrast .contrast-main .contrast-main-center .center-right:hover ul li:nth-child(7){
+    height:80px;
+    line-height: 80px;
+    transition:all 0.5s;
+}
+.sub-contrast .contrast-main .contrast-main-center .center-right:hover ul li:nth-child(7) .On-trial{
+    background:#34355A;
+    font-size:14px;
+    font-family:MicrosoftYaHei;
+    line-height:30px;
+    color:rgba(255,218,177,1);
+    transition:all 0.5s;
+    opacity:1;
+    text-decoration: none;
+}
+.sub-contrast .contrast-main .contrast-main-center ul .top-title{
+    height: 68px;
+    text-align: center;
+    transition:all 0.5s;
+    line-height: 68px;
+    font-size:20px;
+    font-family:Microsoft YaHei;
+    font-weight:400;
+    color:rgba(29,29,29,1);
+    opacity:1;
+    border-bottom: 1px solid rgba(224,224,224,1);
+    border-right: 1px solid rgba(224,224,224,1);
+}
+/* 选中免费版 */
+.sub-contrast .contrast-main .contrast-main-center ul .modify-center{
+    background: rgba(238, 238, 238, 1);
+}
+/* 选中VIP订阅专属服务 */
+.sub-contrast .contrast-main .contrast-main-center ul .modify-right{
+    background:rgba(52,53,90,1);
+    color:rgba(255,218,177,1);
+    position: relative;
+    border-right: 0;
+}
+.sub-contrast .contrast-main .contrast-main-center ul .modify-right img{
+    background:rgba(52,53,90,1);
+    color:rgba(255,218,177,1);
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 174px;
+}
+/* 选中关键词设置颜色 */
+.sub-contrast .contrast-main .contrast-main-center ul li>span{
+    color: #CFAD89;
+}
+
+/* VIP弹窗 */
+
+.hide{
+    display:none;
+}
+.modal{
+    position:fixed;
+    left:50%;
+    top:50%;
+    width:335px;
+    height:395px;
+    margin-left:-200px;
+    margin-top:-250px;
+    z-index:10;
+    background-color:white;
+}
+.modal .modal-dialog{
+    width: 335px;
+    height: 395px;
+    position: relative;
+}
+.modal .modal-dialog img{
+    margin-top: -48px;
+}
+.modal .modal-dialog .vip-code{
+    position: absolute;
+    width: 170px;
+    height: 197px;
+    left: 30%;
+    bottom: 0%;
+}
+.modal .modal-dialog .vip-code .vip-text{
+    width:170px;
+    height:21px;
+    font-size:16px;
+    font-family:MicrosoftYaHei;
+    line-height:24px;
+    color:rgba(59,33,5,1);
+    opacity:1;
+    margin: 20px 0 0 -15px;
+}
+.shade{
+    position:fixed;
+    left:0;
+    right:0;
+    top:0;
+    bottom:0;
+    opacity:0.6;
+    background-color:black;
+    z-index:9;
+}
+.vip-text{
+    text-align:center;
+}

src/web/staticres/vipsubscribe/css/choose_area_new.css

@@ -1,610 +1,620 @@
 @charset "UTF-8";
 .main {
-  width: 100%;
-  overflow: scroll;
+    width: 100%;
+    overflow: scroll;
 }
 
 .main::-webkit-scrollbar {
-  display: none;
+    display: none;
 }
 
 .layout_top-bottom {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    height: 100%;
 }
 
 .layout_top-bottom .layou_top {
-  flex: 1;
-  overflow: scroll;
+    flex: 1;
+    overflow: scroll;
 }
 
 .bottom_button {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  height: .94rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    height: .94rem;
 }
 
 .bottom_button .left_btn,
 .bottom_button .right_btn {
-  flex: 1;
-  height: 100%;
-  font-size: .34rem;
+    flex: 1;
+    height: 100%;
+    font-size: .34rem;
 }
 
 .bottom_button .left_btn {
-  color: #2cb7ca;
-  background-color: #fff;
-  border-top: 1px solid #e0e0e0;
+    color: #2cb7ca;
+    background-color: #fff;
+    border-top: 1px solid #e0e0e0;
 }
 
 .bottom_button .right_btn {
-  color: #fff;
-  background-color: #2cb7ca;
-  border-top: 1px solid #2cb7ca;
+    color: #fff;
+    background-color: #2cb7ca;
+    border-top: 1px solid #2cb7ca;
 }
 
 .bottom_button button[disabled] {
-  opacity: .5;
+    opacity: .5;
 }
 
 .public_btn {
-  width: 100%;
-  height: .94rem;
-  line-height: .94rem;
-  text-align: center;
-  background: #2CB7CA;
-  color: #fff;
-  border-radius: 0.06rem;
-  font-size: .34rem;
+    width: 100%;
+    height: .94rem;
+    line-height: .94rem;
+    text-align: center;
+    background: #2CB7CA;
+    color: #fff;
+    border-radius: 0.06rem;
+    font-size: .34rem;
 }
 
 .tips_btn {
-  display: flex;
-  position: relative;
-  flex-direction: column;
-  align-items: center;
-  justify-content: space-between;
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-between;
 }
 
 .tips_btn .tips_discount {
-  width: 100%;
+    width: 100%;
 }
 
 .tips_btn .tips_discount .tips_d_money {
-  display: none;
-  position: absolute;
-  left: 50%;
-  top: -.2rem;
-  padding: 0 .4rem;
-  height: .64rem;
-  line-height: .64rem;
-  color: #2CB7CA;
-  font-size: .32rem;
-  background-color: #fff;
-  border-radius: .32rem;
-  transform: translate(-50%, -100%);
-  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+    display: none;
+    position: absolute;
+    left: 50%;
+    top: -.2rem;
+    padding: 0 .4rem;
+    height: .64rem;
+    line-height: .64rem;
+    color: #2CB7CA;
+    font-size: .32rem;
+    background-color: #fff;
+    border-radius: .32rem;
+    transform: translate(-50%, -100%);
+    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
 }
 
 .tips_btn .tips_discount .tips_d_text {
-  display: none;
-  height: .72rem;
-  line-height: .72rem;
-  color: #fff;
-  font-size: .28rem;
-  text-align: center;
-  background-color: #FFB901;
+    display: none;
+    height: .72rem;
+    line-height: .72rem;
+    color: #fff;
+    font-size: .28rem;
+    text-align: center;
+    background-color: #FFB901;
 }
 
 .tips_btn .btns {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  height: .94rem;
-  line-height: .94rem;
-  color: #fff;
-  font-size: .34rem;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+    height: .94rem;
+    line-height: .94rem;
+    color: #fff;
+    font-size: .34rem;
 }
 
 .tips_btn .btns .save-btn,
 .tips_btn .btns .reset-btn {
-  flex: 1;
-  width: 50%;
-  text-align: center;
-  height: 100%;
-  font-size: .34rem;
+    flex: 1;
+    width: 50%;
+    text-align: center;
+    height: 100%;
+    font-size: .34rem;
 }
 
 .tips_btn .btns .reset-btn {
-  background: #fff;
-  color: #2cb7ca;
-  border-top: 1px solid #e0e0e0;
+    background: #fff;
+    color: #2cb7ca;
+    border-top: 1px solid #e0e0e0;
 }
 
 .tips_btn .btns .save-btn {
-  background: #2cb7ca;
-  color: #fff;
-  border-top: 1px solid #2cb7ca;
+    background: #2cb7ca;
+    color: #fff;
+    border-top: 1px solid #2cb7ca;
 }
 
 .tips_btn .btns button[disabled] {
-  opacity: .5;
+    opacity: .5;
 }
 
 .jy_icon {
-  position: relative;
-  width: 100%;
-  height: 100%;
+    position: relative;
+    width: 100%;
+    height: 100%;
 }
 
 .jy_icon.decrease:before,
 .jy_icon.increase:before,
 .jy_icon.increase:after {
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  content: '';
-  width: 0.4rem;
-  height: 0.04rem;
-  background-color: #686868;
-  transform: translate(-50%, -50%);
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    content: '';
+    width: 0.4rem;
+    height: 0.04rem;
+    background-color: #686868;
+    transform: translate(-50%, -50%);
 }
 
 .jy_icon.increase:after {
-  transform: translate(-50%, -50%) rotate(90deg);
+    transform: translate(-50%, -50%) rotate(90deg);
 }
 
 /*禁止长按复制 加给body*/
 .no-touch {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 
 /* 弹性盒子布局 */
 .flex_alginC {
-  display: flex;
-  align-items: center;
+    display: flex;
+    align-items: center;
 }
 
 .flex_alginC_justB {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
 }
 
 .flex_alginC_justC {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .flex_column {
-  display: flex;
-  flex-direction: column;
+    display: flex;
+    flex-direction: column;
 }
 
 .flex_column_alignC {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
 }
 
 /* 自定义弹窗*/
 @-webkit-keyframes c {
-  0% {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+    0% {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }
 
 @keyframes c {
-  0% {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
+    0% {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
 }
 
 .custom-dialog .weui-animate-fade-in {
-  -webkit-animation: c ease 0s forwards;
-  animation: c ease 0s forwards;
+    -webkit-animation: c ease 0s forwards;
+    animation: c ease 0s forwards;
 }
 
 @-webkit-keyframes d {
-  0% {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
+    0% {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
 }
 
 @keyframes d {
-  0% {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
+    0% {
+        opacity: 1;
+    }
+    to {
+        opacity: 0;
+    }
 }
 
 .custom-dialog .weui-animate-fade-out {
-  -webkit-animation: d ease 0s forwards;
-  animation: d ease 0s forwards;
+    -webkit-animation: d ease 0s forwards;
+    animation: d ease 0s forwards;
 }
 
 .custom-dialog .weui-dialog__hd {
-  background: #F5F4F9;
-  padding: .17rem 0;
-  color: #000;
-  font-size: .34rem;
-  text-align: center;
+    background: #F5F4F9;
+    padding: .17rem 0;
+    color: #000;
+    font-size: .34rem;
+    text-align: center;
 }
 
 .custom-dialog .weui-dialog__bd {
-  padding: .37rem 0;
-  color: #1D1D1D;
-  font-size: .32rem;
-  text-align: center;
+    padding: .37rem 0;
+    color: #1D1D1D;
+    font-size: .32rem;
+    text-align: center;
 }
 
 .custom-dialog .weui-dialog__ft:after {
-  border: 0;
+    border: 0;
 }
 
 .custom-dialog .weui-dialog__btn:after {
-  border: 0;
+    border: 0;
 }
 
 .custom-dialog .weui-dialog__ft {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding-bottom: .38rem;
-  box-sizing: border-box;
-  text-align: center;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding-bottom: .38rem;
+    box-sizing: border-box;
+    text-align: center;
 }
 
 .custom-dialog .weui-dialog__btn {
-  display: block;
-  width: 1.72rem;
-  height: .72rem;
-  line-height: .72rem;
-  color: #fff;
-  padding: 0;
-  flex: none;
-  text-align: center;
-  border-radius: 3px;
+    display: block;
+    width: 1.72rem;
+    height: .72rem;
+    line-height: .72rem;
+    color: #fff;
+    padding: 0;
+    flex: none;
+    text-align: center;
+    border-radius: 3px;
 }
 
 .custom-dialog .weui-dialog__btn_primary {
-  background-color: #2CB7CA;
-  margin-right: 1rem;
+    background-color: #2CB7CA;
+    margin-right: 1rem;
 }
 
 .custom-dialog .weui-dialog__btn_default {
-  background-color: #BFBFC3;
+    background-color: #BFBFC3;
 }
 
 /* 自定义switch按钮 */
 .custom-switch {
-  position: relative;
-  width: 52px;
-  height: 32px;
-  border: 1px solid #dfdfdf;
-  outline: 0;
-  border-radius: 16px;
-  box-sizing: border-box;
-  background-color: #dfdfdf;
-  -webkit-transition: background-color .1s,border .1s;
-  transition: background-color .1s,border .1s;
-  -webkit-appearance: none;
+    position: relative;
+    width: 52px;
+    height: 32px;
+    border: 1px solid #dfdfdf;
+    outline: 0;
+    border-radius: 16px;
+    box-sizing: border-box;
+    background-color: #dfdfdf;
+    -webkit-transition: background-color .1s, border .1s;
+    transition: background-color .1s, border .1s;
+    -webkit-appearance: none;
 }
 
 .custom-switch:before {
-  content: " ";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 50px;
-  height: 30px;
-  border-radius: 15px;
-  background-color: #fdfdfd;
-  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
-  transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
-  transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
-  transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1), -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
+    content: " ";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 50px;
+    height: 30px;
+    border-radius: 15px;
+    background-color: #fdfdfd;
+    -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
+    transition: -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
+    transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
+    transition: transform 0.35s cubic-bezier(0.45, 1, 0.4, 1), -webkit-transform 0.35s cubic-bezier(0.45, 1, 0.4, 1);
 }
 
 .custom-switch:after {
-  content: " ";
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 30px;
-  height: 30px;
-  border-radius: 15px;
-  background-color: #fff;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
-  -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
-  transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
-  transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
-  transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35), -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
+    content: " ";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 30px;
+    height: 30px;
+    border-radius: 15px;
+    background-color: #fff;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
+    -webkit-transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
+    transition: -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
+    transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
+    transition: transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35), -webkit-transform 0.35s cubic-bezier(0.4, 0.4, 0.25, 1.35);
 }
 
 .custom-switch.checked {
-  border-color: #04be02;
-  background-color: #04be02;
+    border-color: #04be02;
+    background-color: #04be02;
 }
 
 .custom-switch.checked:before {
-  transform: scale(0);
+    transform: scale(0);
 }
 
 .custom-switch.checked:after {
-  transform: translateX(20px);
+    transform: translateX(20px);
 }
 
 .custom-toast .weui-toast {
-  font-size: .3rem;
-  padding: 0.2rem;
-  width: auto;
-  max-width: 6rem;
-  min-height: 0;
-  height: auto;
-  top: 50%;
-  left: 50%;
-  margin-left: 0;
-  margin-top: -0.47rem;
-  transform: translateX(-50%) translateY(-50%);
+    font-size: .3rem;
+    padding: 0.2rem;
+    width: auto;
+    max-width: 6rem;
+    min-height: 0;
+    height: auto;
+    top: 50%;
+    left: 50%;
+    margin-left: 0;
+    margin-top: -0.47rem;
+    transform: translateX(-50%) translateY(-50%);
 }
 
 .custom-toast .weui-icon_toast {
-  display: none;
+    display: none;
 }
 
 .custom-toast .weui-toast__content {
-  margin: 0;
+    margin: 0;
 }
 
 .jymobile-tab-triangle {
-  position: relative;
+    position: relative;
 }
 
 .jymobile-tab-triangle:after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  right: 0;
-  width: 0;
-  height: 0;
-  font-size: 0;
-  line-height: 0;
-  border-style: solid;
-  border-width: .1rem;
-  border-color: #aaa transparent transparent transparent;
-  transform: translate(140%, -30%);
+    content: '';
+    position: absolute;
+    top: 50%;
+    right: 0;
+    width: 0;
+    height: 0;
+    font-size: 0;
+    line-height: 0;
+    border-style: solid;
+    border-width: .1rem;
+    border-color: #aaa transparent transparent transparent;
+    transform: translate(140%, -30%);
 }
 
 .jymobile-tab-triangle.active:after {
-  border-color: transparent transparent #2cb7ca transparent;
-  transform: translate(140%, -70%);
+    border-color: transparent transparent #2cb7ca transparent;
+    transform: translate(140%, -70%);
 }
 
 .jymobile-tab-triangle.current {
-  color: #2cb7ca;
+    color: #2cb7ca;
 }
 
 .jymobile-tab-triangle.current:after {
-  border-color: #2cb7ca transparent transparent transparent;
+    border-color: #2cb7ca transparent transparent transparent;
 }
 
 #choose_area {
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-  overflow: hidden;
-  height: 100%;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    overflow: hidden;
+    height: 100%;
 }
 
 #choose_area .form {
-  flex: 1;
-  overflow-y: scroll;
+    flex: 1;
+    overflow-y: scroll;
 }
 
 #choose_area .optional_count, #choose_area .all_area {
-  height: .88rem;
-  line-height: .88rem;
-  padding: 0 .3rem;
-  font-size: .3rem;
-  color: #1d1d1d;
+    height: .88rem;
+    line-height: .88rem;
+    padding: 0 .3rem;
+    font-size: .3rem;
+    color: #1d1d1d;
 }
 
 #choose_area .optional_count em, #choose_area .all_area em {
-  color: #2cb7ca;
+    color: #2cb7ca;
 }
 
 #choose_area .result {
-  position: relative;
-  padding: .2rem .3rem;
-  font-size: .26rem;
-  text-align: justify;
+    position: relative;
+    padding: .2rem .3rem;
+    font-size: .26rem;
+    text-align: justify;
 }
 
 #choose_area .result .result_text {
-  position: relative;
-  min-height: 19px;
+    position: relative;
+    min-height: 19px;
 }
 
 #choose_area .result .line_two {
-  text-overflow: ellipsis;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  line-clamp: 2;
-  -webkit-box-orient: vertical;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    line-clamp: 2;
+    -webkit-box-orient: vertical;
 }
 
 #choose_area .result .detail, #choose_area .result .packup {
-  display: inline-block;
-  width: 1.5rem;
-  padding-right: 0.1rem;
-  text-align: right;
-  color: #2cb7ca;
-  font-size: .26rem;
-  z-index: 999;
+    display: inline-block;
+    width: 1.5rem;
+    padding-right: 0.1rem;
+    text-align: right;
+    color: #2cb7ca;
+    font-size: .26rem;
+    z-index: 999;
 }
 
 #choose_area .result .detail {
-  position: absolute;
-  right: 0;
-  bottom: 0;
-  background: linear-gradient(90deg, rgba(245, 244, 249, 0) 0%, rgba(245, 244, 249, 0.96) 36%, #f5f4f9 100%);
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    background: linear-gradient(90deg, rgba(245, 244, 249, 0) 0%, rgba(245, 244, 249, 0.96) 36%, #f5f4f9 100%);
 }
 
 #choose_area .result .packup {
-  position: absolute;
-  right: 0.3rem;
-  bottom: 0;
-  margin-top: .1rem;
+    position: absolute;
+    right: 0.3rem;
+    bottom: 0;
+    margin-top: .1rem;
 }
 
 #choose_area .select-area-box {
-  padding-bottom: .94rem;
+    padding-bottom: .94rem;
 }
 
 #choose_area .select-area-box .tab {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  color: #1d1d1d;
-  background: #fff;
-  font-size: .3rem;
-  padding: .2rem .5rem;
-  border-bottom: 1px solid #e0e0e0;
-  box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    color: #1d1d1d;
+    background: #fff;
+    font-size: .3rem;
+    padding: .2rem .5rem;
+    border-bottom: 1px solid #e0e0e0;
+    box-sizing: border-box;
 }
 
 #choose_area .select-area-box .tab .province {
-  display: flex;
-  align-items: center;
+    display: flex;
+    align-items: center;
 }
 
 #choose_area .select-area-box .tab .province .checkbox {
-  width: .4rem;
-  height: .4rem;
-  border: 1px solid #ddd;
-  border-radius: 50%;
-  margin-right: .2rem;
-  -webkit-appearance: none;
-  background: #fff;
+    width: .4rem;
+    height: .4rem;
+    border: 1px solid #ddd;
+    border-radius: 50%;
+    margin-right: .2rem;
+    -webkit-appearance: none;
+    background: #fff;
 }
 
 #choose_area .select-area-box .tab .province .checkbox:checked {
-  border: 0;
-  background: url(/vipsubscribe/image/xuanzhong.png) no-repeat center center;
-  background-size: 100% 100%;
+    border: 0;
+    background: url(/vipsubscribe/image/xuanzhong.png) no-repeat center center;
+    background-size: 100% 100%;
 }
 
 #choose_area .select-area-box .tab .province .checkbox[disabled] {
-  border: 0;
-  background: url(/vipsubscribe/image/active_disabled.png) no-repeat center center;
-  background-size: 100% 100%;
-  opacity: 1;
+    border: 0;
+    background: url(/vipsubscribe/image/active_disabled.png) no-repeat center center;
+    background-size: 100% 100%;
+    opacity: 1;
 }
 
 #choose_area .select-area-box .tab .province .checkbox.half {
-  border: 0 !important;
-  background: url(/vipsubscribe/image/banxuan.png) no-repeat center center !important;
-  background-size: cover !important;
+    border: 0 !important;
+    background: url(/vipsubscribe/image/banxuan.png) no-repeat center center !important;
+    background-size: cover !important;
 }
 
 #choose_area .select-area-box .tab .province .checkbox.half[disabled] {
-  border: 0 !important;
-  background: url(/vipsubscribe/image/banxuan.png) no-repeat center center !important;
-  background-size: cover !important;
-  opacity: 1!important;
+    border: 0 !important;
+    background: url(/vipsubscribe/image/banxuan.png) no-repeat center center !important;
+    background-size: cover !important;
+    opacity: 1 !important;
 }
 
 #choose_area .select-area-box .tab .optional {
-  color: #2CB7CA;
-  font-size: 0.28rem;
-  margin-left: -2.8rem;
+    color: #2CB7CA;
+    font-size: 0.28rem;
+    margin-left: -2.8rem;
 }
 
 #choose_area .select-area-box label::after {
-  font-size: 14px;
-  float: right;
-  margin-right: 15px;
+    font-size: 14px;
+    float: right;
+    margin-right: 15px;
 }
 
 #choose_area .select-area-box .tab_content {
-  display: none;
-  font-size: .28rem;
-  padding: .1rem .3rem;
-  text-align: center;
+    display: none;
+    font-size: .28rem;
+    padding: .1rem .3rem;
+    text-align: center;
 }
 
 #choose_area .select-area-box .tab_content .city {
-  float: left;
-  padding: .1rem .2rem;
-  background: #fff;
-  margin: .1rem 0 .1rem .1rem;
-  border-radius: 0.04rem;
-  font-size: .28rem;
+    float: left;
+    padding: .1rem .2rem;
+    background: #fff;
+    margin: .1rem 0 .1rem .1rem;
+    border-radius: 0.04rem;
+    font-size: .28rem;
 }
 
 #choose_area .select-area-box .tab_content .active {
-  background: #2cb7ca;
-  color: #fff;
+    background: #2cb7ca;
+    color: #fff;
 }
 
 #choose_area .select-area-box .tab_content .active[disabled] {
-  background: #BFBFC3;
-  color: #fff;
+    background: #BFBFC3;
+    color: #fff;
 }
 
 #choose_area .select-area-box .tab_content .city[disabled] {
-  background: #BFBFC3;
-  color: #fff;
+    background: #BFBFC3;
+    color: #fff;
 }
 
 #choose_area .select-area-box .index {
-  padding: .3rem .3rem .1rem .3rem;
-  font-size: .32rem;
+    padding: .3rem .3rem .1rem .3rem;
+    font-size: .32rem;
 }
 
 #choose_area .slide {
-  background: transparent;
-  position: fixed;
-  right: 0;
-  top: 50%;
-  height: 8.5rem;
-  width: .4rem;
-  font-size: .26rem;
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  padding: .1rem 0;
-  align-items: center;
-  margin-top: -4.25rem;
-  z-index: 9999;
+    background: transparent;
+    position: fixed;
+    right: 0;
+    top: 50%;
+    height: 8.5rem;
+    width: .4rem;
+    font-size: .26rem;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding: .1rem 0;
+    align-items: center;
+    margin-top: -4.25rem;
+    z-index: 9999;
 }
 
 #choose_area .slide a {
-  margin-bottom: .1rem;
+    margin-bottom: .1rem;
 }
+
+.icon.iconfont {
+    display: inline-block;
+}
+
+.icon.iconfont.up {
+    display: inline-block;
+    transform: rotate(-180deg);
+}
+

src/web/staticres/vipsubscribe/js/editArea.js

@@ -54,18 +54,28 @@ function createMoreCity(arr) {
     return tempHtml
 }
 
+var animatedRuning = false;
+
+function checkAnimatedRuning() {
+    if (animatedRuning) {
+        return true
+    }
+    animatedRuning = true;
+    setTimeout(function () {
+        animatedRuning = false;
+    }, 500);
+    return false
+}
+
 // 省下拉市事件
 function slideFun(obj) {
+    if (checkAnimatedRuning()) {
+        return
+    }
     if (obj.next('.tab_content:not(:animated)').css("display") == "block") {
-        obj.children().children('i').css({
-            "display": "inline-block",
-            "transform": "rotate(0)"
-        })
+        obj.children().children('i').removeClass("up");
     } else {
-        obj.children().children('i').css({
-            "display": "inline-block",
-            "transform": "rotate(-180deg)"
-        })
+        obj.children().children('i').addClass("up");
     }
     obj.toggleClass('selected').next('.tab_content:not(:animated)').slideToggle(500)
     obj.parent().siblings().children('.tab').removeClass('selected');
@@ -233,18 +243,15 @@ function initResult() {
 $(function () {
     // 省下拉事件
     $('.tab:not(.municipality)').on('click', function () {
+        if (checkAnimatedRuning()) {
+            return
+        }
         if ($(this).next('.tab_content:not(:animated)').css("display") == "block") {
-            $(this).children().children('i').css({
-                "display": "inline-block",
-                "transform": "rotate(0)"
-            })
+            $(this).children().children('i').removeClass("up");
         } else {
-            $(this).children().children('i').css({
-                "display": "inline-block",
-                "transform": "rotate(-180deg)"
-            })
+            $(this).children().children('i').addClass("up");
         }
-        $(this).toggleClass('selected').next('.tab_content:not(:animated)').slideToggle(500)
+        $(this).toggleClass('selected').next('.tab_content:not(:animated)').slideToggle(500);
         $(this).parent().siblings().children('.tab').removeClass('selected');
     });
     getData();
@@ -359,10 +366,7 @@ $(function () {
         $('.city').removeClass('active');
         $('.tab_content').slideUp();
         $('.optional').remove();
-        $('.tab').find('i').css({
-            "display": "inline-block",
-            "transform": "rotate(0)"
-        })
+        $('.tab').find('i').removeClass("up");
         init();
     })
     // 确定修改事件
@@ -384,4 +388,4 @@ function theSameAs(select) {
     let tmp1 = getAreaClassArr(select);
     let tmp2 = getAreaClassArr(areaData.data.area);
     return (JSON.stringify(tmp1[0].sort()) === JSON.stringify(tmp2[0].sort())) && (JSON.stringify(tmp1[1].sort()) === JSON.stringify(tmp2[1].sort()));
-}
+}

src/web/templates/pc/subscribe_new.html

@@ -0,0 +1,136 @@
+<html>
+<head>
+    <title>招标订阅_剑鱼标讯，全行业招标信息智能推送领导者</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1"/>
+    <meta name="Keywords" content="招标订阅,招标项目,中标项目,招标信息,剑鱼标讯"/>
+    <meta name="Description" content="使用剑鱼标讯，可以精准匹配招标信息，只需要微信关注剑鱼标讯公众号，然后自行设定所关注的招标关键词和地区，满足订阅需求的招标信息就会在两个小时内自动推送。"/>
+    <meta name="renderer" content="webkit">
+    <meta content="telephone=no" name="format-detection"/>
+    {{include "/common/pnc.html"}}
+    <link rel="stylesheet" type="text/css" href="{{Msg "seo" "cdn"}}/css/reset.css?v={{Msg "seo" "version"}}"/>
+    <link rel="stylesheet" type="text/css" href="{{Msg "seo" "cdn"}}/css/subscribe.css?v={{Msg "seo" "version"}}"/>
+    <link rel="stylesheet" type="text/css" href="{{Msg "seo" "cdn"}}/pccss/reset_pc.css"/>
+    {{/*<link rel="stylesheet" type="text/css" href="{{Msg "seo" "cdn"}}/pccss/zhaobiao.css"/>*/}}
+    <link href="{{Msg "seo" "cdn"}}/css/pc.css?v={{Msg "seo" "version"}}" rel="stylesheet">
+    <link rel="stylesheet" type="text/css"
+          href="{{Msg "seo" "cdn"}}/pccss/public-nav-1200.css?v={{Msg "seo" "version"}}"/>
+    <script type="text/javascript" src="{{Msg "seo" "cdn"}}/js/public-nav.js?v={{Msg "seo" "version"}}"></script>
+    <script src="{{Msg "seo" "cdn"}}/js/jquery.cookie.js"></script>
+    <script>
+        $(function () {
+            $(window).scroll(function () {
+                if ($(this).scrollTop() > 0) {
+                    $("#backTop").show();
+                } else {
+                    $("#backTop").hide();
+                }
+            });
+        });
+    </script>
+<body>
+{{include "/common/pchead.html"}}
+<!--内容-->
+<!-- banner图板块 -->
+<div class="tender-1">
+    <div class="imgauto">
+        <img src="/images/subscribe/banner.png" alt="">
+    </div>
+</div>
+<!-- 订阅模式选择板块 -->
+<div class="subscription">
+    <div class="sub-center">
+        <div class="sub-free">
+            <h3 class="free-title">免费版订阅</h3>
+            <button class="free-btn">立即免费订阅</button>
+        </div>
+        <div class="sub-vip">
+            <div class="vip-logo">
+                <img src="/images/subscribe/vip-logo.png" alt="">
+                <h3 class="vip-title">VIP订阅</h3>
+            </div>
+            <button class="vip-btn btn btn-primary">免费试用</button>
+        </div>
+    </div>
+</div>
+<!-- VIP弹窗 -->
+<div class="modal hide">
+    <div class="modal-dialog">
+        <img src="/images/subscribe/vip_tanchuang.png" alt="">
+        <div class="vip-code">
+            <img src="/images/subscribe/QR_code.png" alt="">
+            <p class="vip-text">扫描二维码体验VIP订阅</p>
+        </div>
+    </div>
+</div>
+<div class="shade hide"></div>
+<!-- 订阅模式对比板块 -->
+<div class="sub-contrast">
+    <div class="contrast-header">
+        <div class="header-title">
+            对比
+        </div>
+    </div>
+    <div class="contrast-main">
+        <div class="contrast-main-center">
+            <div class="center-left">
+                <ul>
+                    <li class="top-title modify-left">功能/价格</li>
+                    <li>项目匹配</li>
+                    <li>行业订阅</li>
+                    <li>关键词</li>
+                    <li>匹配方式</li>
+                    <li>订阅区域</li>
+                    <li>价格</li>
+                </ul>
+            </div>
+            <div class="center-center">
+                <ul>
+                    <li class="top-title modify-center">免费版</li>
+                    <li>匹配单次公告信息</li>
+                    <li>—</li>
+                    <li>10组关键词</li>
+                    <li>仅支持标题匹配</li>
+                    <li>订阅区域精确到省</li>
+                    <li><i class="btn-free">免费</i></li>
+                </ul>
+            </div>
+            <div class="center-right">
+                <ul>
+                    <li class="top-title modify-right">
+                        VIP订阅专属服务
+                        <img src="/images/subscribe/mengban.png" alt="">
+                    </li>
+                    <li><span>匹配项目信息</span>，为你推送所匹配项目后续的全部动态</li>
+                    <li>按采购单位类型订阅，无需繁琐关键词设置</li>
+                    <li><span>300组</span>关键词，获取招标信息更全面</li>
+                    <li>支持<span>标题匹配+全文匹配</span>，信息筛选更灵活</li>
+                    <li>订阅区域<span>精确到地级市</span>，只看你最关注的</li>
+                    <li>低至5.8元/月
+                        <a href="javascript:;" class="On-trial vip-btn">免费试用</a>
+                    </li>
+                </ul>
+            </div>
+        </div>
+    </div>
+</div>
+<!--内容-->
+
+
+<!--百度统计start-->
+{{include "/common/pcbottom.html"}}
+{{include "/common/baiducc.html"}}
+<!--百度统计end-->
+
+<script>
+    $('.vip-btn').click(function () {
+        $('.hide').fadeIn(300);
+        $('.modal,.shade').slideDown(300);
+        // $('.hide').removeClass('hide');
+    })
+    $('.shade').click(function () {
+        $('.hide').fadeOut(300);
+        $('.modal,.shade').slideUp(300);
+    })
+</script>
+</body>
+</html>

src/web/templates/weixin/vipsubscribe/choose_area.html

@@ -653,6 +653,9 @@
                 document.querySelector('#' + s).scrollIntoView({block: 'center'});
             })
             $(".select-area-box .tab:not(.municipality)").on('click', function (event) {
+                if (AreaChoose.checkAnimatedRuning()) {
+                    return
+                }
                 if ($(this).next('.tab_content:not(:animated)').css("display") == "block") {
                     $(this).children().children('i').css({
                         "display": "inline-block",
@@ -761,11 +764,22 @@
                 $('.tips_d_money').text('￥' + price);
             }
 
+        },
+        animatedRuning: false,
+        checkAnimatedRuning: function () {
+            if (AreaChoose.animatedRuning) {
+                return true
+            }
+            AreaChoose.animatedRuning = true;
+            setTimeout(function () {
+                AreaChoose.animatedRuning = false;
+            }, 500);
+            return false
         }
-    }
+    };
 
     $(function () {
-        AreaChoose.isOpen()
+        AreaChoose.isOpen();
         AreaChoose.inintData(); //初始化 已选择和已购买数据
         AreaChoose.inintPage(); //初始化城市数据