demo1.vue 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <template>
  2. <view class="demo1">
  3. <!---------- 标题文字 ------------>
  4. <!-- 箭头+标题文字 -->
  5. <view class="icon-title-navBar-box">
  6. <view @click="goUpPage" class="nav-bar-icon"></view>
  7. <text class="nav-bar-title">箭头+标题文字</text>
  8. </view>
  9. <!-- 箭头+标题文字 + 文字按钮-->
  10. <view class="ezy-navBar-box">
  11. <view class="nav-bar-icon"></view>
  12. <text class="nav-bar-title">订单支付</text>
  13. <view class="text-btn">取消订单</view>
  14. </view>
  15. <!-- 仅一个箭头 -->
  16. <!-- <view @click="goUpPage" class="ezy-nav-bar-icon"></view> -->
  17. <view class="icon-title-navBar-box">
  18. <text class="nav-bar-title">标题文字</text>
  19. </view>
  20. <!-- switch -->
  21. <view>
  22. <view class="uni-list-cell-db">照片</view>
  23. <switch checked @change="switch1Change" />
  24. </view>
  25. <!---------- 搜索框 ------------>
  26. <!-- 查询职业 -->
  27. <view class="phone-search-box">
  28. <input class="search-input" placeholder="请输入职业名称" v-model="data.zyName" />
  29. <view class="search-icon" @click="handleSearch">
  30. <uni-icons type="search" size="24" color="#fff"></uni-icons>
  31. </view>
  32. </view>
  33. </view>
  34. </template>
  35. <script setup>
  36. import {ref,reactive} from "vue";
  37. const data = reactive({
  38. zyName: '', // 职业名称
  39. })
  40. function goUpPage(){}
  41. function handleSearch(){}
  42. </script>
  43. <style>
  44. </style>