百富门答题小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

73 lines
1.5 KiB

8 months ago
8 months ago
8 months ago
  1. <template>
  2. <view class="home">
  3. <view class="content">
  4. <span class="font-bold mb-60">您是否有品鉴威士忌的习惯?</span>
  5. <view class="mian-btn" :class="{active:isActive === 'yes'}" @click="setActive('yes')"></view>
  6. <view class="mian-btn" :class="{active:isActive === 'no'}" @click="setActive('no')"></view>
  7. <view class="b-btn mt-60">
  8. <view class="pre-btn">
  9. 上一题
  10. </view>
  11. <view class="next-btn" @click="next">
  12. 下一题
  13. </view>
  14. </view>
  15. <text class="second-color">欢快无限饮&nbsp;&nbsp;饮酒有限度</text>
  16. </view>
  17. </view>
  18. </template>
  19. <script>
  20. export default {
  21. data() {
  22. return {
  23. isActive:null
  24. }
  25. },
  26. methods: {
  27. setActive(value){
  28. this.isActive = value
  29. },
  30. next(){
  31. if(this.isActive!==null){
  32. uni.navigateTo({
  33. url:'/pages_order/info/chooseArea'
  34. })
  35. }else{
  36. uni.showToast({
  37. title:'请选择后进行下一题',
  38. icon: 'none'
  39. })
  40. }
  41. }
  42. }
  43. }
  44. </script>
  45. <style lang="scss" scoped>
  46. .b-btn{
  47. width: 86%;
  48. display: flex;
  49. justify-content: space-between;
  50. padding-top: 20vh;
  51. .pre-btn{
  52. border: 4rpx solid #f1e0c6;
  53. padding: 16rpx 90rpx;
  54. border-radius: 66rpx;
  55. color: #e6bf7f;
  56. }
  57. .next-btn{
  58. background-image: url('../../static/image/home/btn.png');
  59. background-size: contain;
  60. background-repeat: no-repeat;
  61. background-position: center;
  62. width: 40vw;
  63. display: flex;
  64. align-items: center;
  65. justify-content: center;
  66. color: white;
  67. }
  68. }
  69. </style>