uniapp小练习_1

主要是练习，涉及简单的tablebar、标签页、详情页等等，格式较丑，不想深究，需要自取，代码比较完整，图片链接是公开30天

login.vue

<template>
  <view class="login">
      <view class="user-info">
          <view class="logo"><image class="avatar" src="http://si6syods5.hn-bkt.clouddn.com/zhaopian/grzx.png"></image> </view>
          <text class="user-id">请登录</text>
      </view>
    <view class="login-container">
      <view class="input-item">
        <input type="text" placeholder="请输入用户名" v-model="username" />
      </view>
      <view class="input-item">
        <input type="password" placeholder="请输入密码" v-model="password"/>
      </view>
      <view class="submit-btn" @click="submit">登录</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      username: "",
      password: ""
    };
  },
  methods: {
    submit() {
      if (this.username === "230326110" && this.password === "lsn020617") {
        // 密码正确，执行跳转操作
        uni.navigateTo({
          url: "/pages/profile/profile"
        });
      } else {
        uni.showToast({
          title: "用户名或密码错误",
          icon: "none"
        });
      }
    }
  }
};
</script>

<style scoped>
.login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #f5f5f5;
}
.user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 30rpx;
  margin-top: 40rpx;
}

.user-id {
  margin-top: 30rpx;
  color: black;
  font: bold;
  font-size: 40rpx;
  margin-bottom: 60rpx;
}
.login-container {
  width: 80%;
  max-width: 400px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
}

.logo {
  margin-bottom: 20px;
}

.input-item {
  margin-bottom: 10px;
}

.submit-btn {
  background-color:royalblue;
  color: white;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  justify-content: center; /* 水平居中 */
}
</style>

personalInfo.vue

<template>  
  <view class="container1">  
    <!-- 顶部导航栏 -->  
    <uni-nav-bar left-icon="back" @clickLeft="goBack" title="智能门锁" />  
    
    <!-- 主标题 -->  
    <view class="title">智能门锁</view>  
    
    <!-- 功能图标区域 -->  
    <view class="icon-grid">  
      <view class="icon-item" v-for="(item, index) in iconItems" :key="index">  
        <view class="icon-circle">  
        <image :src="item.Image" mode="aspectFit" style="width: 50rpx; height: 50rpx;"></image>
        </view>  
        <text class="icon-text">{{ item.text }}</text>  
      </view>  
    </view>  
    
    <!-- 按钮区域 -->  
    <view class="button-area">  
      <button class="btn btn-primary" @click="addSmartLock">添加智能门锁</button>  
      <button class="btn btn-secondary" @click="buySmartLock('show')">购买智能门锁</button>  
    </view>  
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      iconItems: [  
        {Image: 'http://si6syods5.hn-bkt.clouddn.com/zhaopian/zwkm.png', text: '指纹开门' },  
        {Image: 'http://si6syods5.hn-bkt.clouddn.com/zhaopian/lsmm.png', text: '临时密码' },  
        {Image: 'http://si6syods5.hn-bkt.clouddn.com/zhaopian/fqjb.png', text: '防撬警报' },  
        {Image: 'http://si6syods5.hn-bkt.clouddn.com/zhaopian/kmjl.png', text: '开门记录' },  
        {Image: 'http://si6syods5.hn-bkt.clouddn.com/zhaopian/yjgd.png', text: '应急供电' },  
        {Image: 'http://si6syods5.hn-bkt.clouddn.com/zhaopian/mmbh.png', text: '密码保护' },  
      ]  
    }  
  },  
  methods: {  
    goBack() {  
      uni.navigateBack()  
    },  
    addSmartLock() {  
      uni.showToast({  
        title: '添加智能门锁',  
        icon: 'none'  
      })  
    },  
    
    buySmartLock(show) {   
        uni.navigateTo({
            url: "/pages/show/show"
        })
    }  
  }  
}  
</script>  

<style lang="scss">  
.container1 {  
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  height: 92vh; /* 确保容器占满整个视口高度 */
}  

.title {  
  font-size: 36rpx;  
  font-weight: bold;  
  margin: 30rpx 0;  
}  

.icon-grid {  
  display: flex;  
  flex-wrap: wrap;  
  justify-content: space-between;  
  margin-bottom: 40rpx;
  margin-top: 180rpx;
}  

.icon-item {  
  width: 33.33%;  
  display: flex;  
  flex-direction: column;  
  align-items: center;  
  margin-bottom: 30rpx;  
}  

.icon-circle {  
  width: 120rpx;  
  height: 120rpx;  
  border-radius: 50%;  
  background-color: transparent;  
  display: flex;  
  justify-content: center;  
  align-items: center;  
  margin-bottom: 10rpx;  
}  

.iconfont {  
  font-size: 50rpx;  
  color: #1890ff;  
}  

.icon-text {  
  font-size: 24rpx;  
  color: #333;  
}  

.button-area {  
  margin-top: 140rpx;  
}  

.btn {  
  width: 80%;  
  height: 80rpx;  
  line-height: 80rpx;  
  text-align: center;  
  border-radius: 20rpx;  
  margin-bottom: 20rpx;  
  font-size: 28rpx;  
}  

.btn-primary {  
  background-color: #1890ff;  
  color: #fff;  
}  

.btn-secondary {  
  background-color: #fff;  
  color: black;  
  border: none ;  
}  
</style>

profile.vue

<template>  
  <view class="container">  
    <!-- 主要内容区 -->  
    <view class="content">
        <view class="user-info">
            <image class="avatar" src="http://si6syods5.hn-bkt.clouddn.com/zhaopian/grzx.png"></image>
            <text class="user-id">ID:李度123</text>
            </view>
      <!-- 菜单列表 -->  
      <view class="menu-list">  
        <view class="menu-item" v-for="(item, index) in menuItems" :key="index">  
          <text class="menu-icon">{{ item.icon }}</text>  
          <text class="menu-text">{{ item.text }}</text>  
          <text class="menu-arrow">></text>  
        </view>  
      </view>  
    </view>  

    <!-- 底部导航栏 -->  
    <view class="tab-bar">  
      <view class="tab-item" v-for="(tab, index) in tabItems" :key="index" @click="navigateTo('personalInfo')">  
        <text class="tab-icon">{{ tab.icon }}</text>  
        <text class="tab-text">{{ tab.text }}</text>  
      </view>  
    </view>  
  </view>  
</template>  

<script>  
export default {  
  data() {  
    return {  
      menuItems: [  
        { icon: '👤', text: '个人信息' },  
        { icon: '🚰', text: '供水工程信息' },  
        { icon: '💧', text: '用水信息' },  
        { icon: '🔔', text: '通知信息' },  
        { icon: '🔒', text: '修改密码' },  
        { icon: '🚪', text: '注销登录' }  
      ],  
      tabItems: [  
        { icon: '💧', text: '供水工程' },  
        { icon: '📊', text: '用水统计' },  
        { icon: '🔔', text: '消息通知' },  
        { icon: '👤', text: '个人中心' }  
      ]  
    }  
  }  ,
  methods: {  
    navigateTo(personalInfo) {  
      uni.navigateTo({  
        url: "/pages/personalInfo/personalInfo"
      });  
    }  
  }  

   
}  
</script>  

<style>  
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* 防止出现滚动条 */
}

.container {
  display: flex;
  flex-direction: column;
  height: 92vh; /* 确保容器占满整个视口高度 */
  background-image: url('http://si6syods5.hn-bkt.clouddn.com/zhaopian/zhuye.png');
  background-size: cover;
  background-position: center;
}

.content {
  flex: 1;
  background-color: transparent;
  padding: 20rpx;
  overflow: auto; /* 如果内容超出，允许滚动 */
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.avatar {
  width: 80rpx;
  height: 80rpx;
  border-radius: 30rpx;
  margin-top: 40rpx;
}

.user-id {
  margin-top: 30rpx;
  color: black;
  font: bold;
  font-size: 40rpx;
  margin-bottom: 60rpx;
}
.menu-list {
  margin-top: 20rpx;
  background-color: white;
  border-radius: 10rpx;
  height: 150rpx;
}

.menu-item {
    background-color: white;
  display: flex;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
  height: 80rpx;
}

.menu-icon {
  margin-right: 10rpx;
}

.menu-text {
  flex: 1;
}

.menu-arrow {
  color: #999;
}

.tab-bar {
  display: flex;
  justify-content: space-around;
  padding: 10rpx 0;
  background-color: white;
  border-top: 1rpx solid #f0f0f0;
  height: 60rpx; /* 设置固定高度 */
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tab-icon {
  font-size: 24px;
}

.tab-text {
  font-size: 12px;
  color: #666;
}
</style>

show.vue

<template>  
    <view class="container">  
        <view class="background">  
            <view class="search-bar">  
                <input type="search" v-model="searchQuery" placeholder="请输入搜索关键词" />  
                <button open-type="share" class="btn-fx0" @click="share">  
                    <image src="http://si6syods5.hn-bkt.clouddn.com/zhaopian/fenxiang.png" mode="aspectFit"></image>  
                </button>  
            </view>  
            <div class="wenzi">欢迎加入我们!!!</div>
            <view class="buttons">  
                <button @click="keep" class="btn-fx1">  
                    <image src="http://si6syods5.hn-bkt.clouddn.com/zhaopian/shoucang.png" mode="aspectFit"></image>收藏  
                </button>  
            </view>  
        </view>  
        <view class="head-nav">  
            <view :class="navIndex == 0 ? 'activite' : ''" @click="checkIndex(0)" class="nav-item">时间安排</view>  
            <view :class="navIndex == 1 ? 'activite' : ''" @click="checkIndex(1)" class="nav-item">发现</view>  
        </view>  
        <!-- 内容切换 -->  
        <view class="content" v-if="navIndex == 0">  
              <div>待开发区</div>
        </view>  
        <view class="content" v-if="navIndex == 1">  
            <view class="choose">  
                <button class="btn0">全部</button>  
                <button class="btn0">第一次</button>  
                <button class="btn0">路线方案</button>  
                <button class="btn0">交通详解</button>  
                <button class="btn0">住宿方案</button>  
                <button class="btn0">首都市区暴走</button>  
                <button class="btn0">中国都吃啥</button>  
                <button class="btn0">Sanngar小火车</button>  
            </view>  
            <view class="picture">  
                <div class="flex-container" v-for="item in filteredItems" :key="item.id" @click="goToDetail(item)">  
                    <div class="image-container">  
                        <image :src="item.image" mode="aspectFill"></image>  
                    </div>  
                    <div class="text-container">{{ item.text }}</div>  
                </div>  
            </view>  
        </view>  

        <!-- 详情页 -->  
        <view class="detail-view" v-if="selectedItem">
            <view class="button-container">
                <button @click="selectedItem = null" class="btn_xqy">返回</button>  
            </view>
            <image :src="selectedItem.image" mode="aspectFill"></image>  
            <div class="wenzi">{{ selectedItem.text }}</div>  
            <p>{{ selectedItem.details }}</p> <!-- 显示详细信息 -->  
        </view>  
    </view>  
</template>  

<script>  
export default {  
    created() {  
        //#ifdef MP-WEIXIN  
        wx.showShareMenu({  
            withShareTicket: true,  
            menus: ['shareAppMessage', 'shareTimeline']  
        });  
        //#endif  
    },  
    onShareAppMessage(res) {  
        return {  
            title: this.title,  
            imageUrl: this.thumb,  
        }  
    },  
    onShareTimeline(res) {  
        return {  
            title: this.title,  
            imageUrl: this.thumb,  
        }  
    },  
   data() {  
       return {  
           searchQuery: '',  
           navIndex: 1,  
           selectedItem: null, // 用于存储所选项目  
           items: [  
               {   
                   id: 1,   
                   image: 'http://si6syods5.hn-bkt.clouddn.com/zhaopian/bg1.png',   
                   text: '旅行不在乎终点',  
                   details: ' 旅行的美好在于发现未知的自己。' // 新增的详细信息字段  
               },  
               {   
                   id: 2,   
                   image: 'http://si6syods5.hn-bkt.clouddn.com/zhaopian/bg2.png',   
                   text: '世界是一本大书',  
                   details: '世界是一本大书，若不到处走走，你看到的总会是同一页的内容,探索世界的每一个角落，感受不同的文化。'  
               },  
               {   
                   id: 3,   
                   image: 'http://si6syods5.hn-bkt.clouddn.com/zhaopian/bg3.png',   
                   text: '迈出第一步',  
                   details: '很多事情就像是旅行一样，当你做出决定并迈出第一步的时候，最困难的那部分其实就已经完成了'  
               },  
              {
                  id: 4,   
                  image: 'http://si6syods5.hn-bkt.clouddn.com/zhaopian/bg4.png',   
                  text: '很多事情',  
                  details: '就像是旅行一样，当你做出决定并迈出第一步的时候，最困难的那部分其实就已经完成了'  
              },  {   
                   id:5,   
                   image: 'http://si6syods5.hn-bkt.clouddn.com/zhaopian/bg5.png',   
                   text: '很多事情',  
                   details: '很多事情就像是旅行一样，当你做出决定并迈出第一步的时候，最困难的那部分其实就已经完成了'  
               },  {   
                   id: 6,   
                   image: 'http://si6syods5.hn-bkt.clouddn.com/zhaopian/bg6.png',   
                   text: '很多事情',  
                   details: '很多事情就像是旅行一样，当你做经完成了'  
               }, {   
                   id:7,   
                   image: 'http://si6syods5.hn-bkt.clouddn.com/zhaopian/bg7.png',   
                   text: '很多事情',  
                   details: '很多事情就像是旅行一样，当你做出决定出决定并迈事情就像是旅行一样，当你做出决定并迈出第一步的时候，最困难的那部分其实就已经完成了'  
               },  {   
                   id:8,   
                   image: 'http://si6syods5.hn-bkt.clouddn.com/zhaopian/bg8.png',   
                   text: '很多事情',  
                   details: '很多事情就像是旅行一样，当你做出决定并迈出第一步的时候，最困'  
               }, 
           ]  
       }  
   },  
    methods: {  
        goToDetail(item) {  
            this.selectedItem = item; // 设置所选项目  
        },  
        checkIndex(index) {  
            this.navIndex = index; // 切换菜单  
        }  
    },  
    computed: {  
        filteredItems() {  
            // 这里可以根据搜索查询过滤项目  
            if (this.searchQuery) {  
                return this.items.filter(item => item.text.includes(this.searchQuery));  
            }  
            return this.items;  
        }  
    }  
}  
</script>
<style scoped>
body {
    font-family: Arial, sans-serif;
    margin: 0;padding: 0;
    background-color: white;
    overflow: hidden;
}
.search-bar {
  display: flex; /* 使用 Flex 布局 */
  align-items: center; /* 交叉轴方向上居中对齐 */
  justify-content: center; /* 主轴方向上居中对齐 */
  margin-top: 0;
  gap: 50px; /* 设置输入框和按钮之间的间距 */
}
input[type="search"] {
  flex: 1; /* 输入框占据剩余空间 */
  padding: 10px; /* 内边距 */
  border: 1px solid #ccc; /* 边框 */
  border-radius: 5px; /* 圆角 */
}
.btn-fx0 {
  display: flex; /* 使用 Flex 布局 */
  align-items: center; /* 交叉轴方向上居中对齐 */
  justify-content: center; /* 主轴方向上居中对齐 */
  font-weight: bold; /* 文字加粗 */
  padding: 10px 20px; /* 内边距 */
  border: none; /* 移除边框 */
  background-color:transparent; /* 背景颜色 */
  color: #333; /* 文字颜色 */
  border-radius: 5px; /* 圆角 */
}
.btn-fx0:active {
  background-color: yellow; /* 点击时背景变为黄色 */
}
.btn-fx0:hover {
  background-color: #e0e0e0; /* 鼠标悬停时背景变为浅灰色 */
}
.btn-fx0 > image {
  width: 20px; /* 图片宽度 */
  height: 20px; /* 图片高度 */
}
.btn-fx {
  display: flex; /* 使用 Flex 布局 */
  justify-content: center; /* 主轴方向上居中对齐 */
  align-items: center; /* 交叉轴方向上居中对齐 */
  padding: 10px 10px; /* 内边距 */
  border: none; /* 移除边框 */
  background-color: transparent; /* 更改背景颜色 */
  color: #333; /* 文字颜色 */
  border-radius: 5px; /* 圆角 */
  height: 60rpx;
  width: 150rpx;
}
.btn-fx:active{
  background-color: orange; /* 点击时背景变为黄色 */
}
.background {
    background-image: url('http://si6syods5.hn-bkt.clouddn.com/zhaopian/sanya.png'); /* 替换为您的背景图片路径 */
    background-size: cover;
    padding: 100rpx 20rpx;
    color: white;
    margin-top: 0rpx;
}
.nav-item { 
  padding: 10px;
  cursor: pointer;
}
.content{
    background-color: white;
    margin:0;
    padding: 0;
}
.buttons {
  display: flex; /* 使用 Flex 布局 */
  justify-content: flex-end; /* 主轴方向上居中对齐 */
  align-items: center; /* 交叉轴方向上居中对齐 */
  gap: 10px; /* 设置按钮之间的间距 */
  background-color: transparent;
}
.button-container{
    margin-right: 0;
}
.btn_xqy{
    margin-top: 40rpx;
    margin-bottom: 80rpx;
    margin-right: 20rpx;
    gap: 10px; /* 设置按钮之间的间距 */
    background-color: transparent;
    width: 220rpx;
}
.btn-fx1 {
  display: flex; /* 使用 Flex 布局 */
  justify-content: center; /* 主轴方向上居中对齐 */
  align-items: center; /* 交叉轴方向上居中对齐 */
  font-weight: bold; /* 文字加粗 */
  padding: 10px 10px; /* 内边距 */
  border: none; /* 移除边框 */
  background-color:white; /* 背景颜色 */
  color:black; /* 文字颜色 */
  border-radius: 50rpx; /* 圆角 */
  gap: 10rpx; /* 设置图片和文字之间的间距 */
  height: 60rpx;
  width: 150rpx;
  margin: 0rpx;
  font-size: 24rpx;
}
.btn-fx1:active {
  background-color: orange; /* 点击时背景变为黄色 */
}
.btn-fx1 > image {
  width: 45rpx; /* 图片宽度 */
  height:45rpx; /* 图片高度 */
}
.choose {
  display: flex;
  flex-wrap: wrap;
  margin-right: 30rpx;
  margin-bottom: 60rpx;
  margin-left: 30rpx;
}
.btn0{
    background-color: transparent;
    height: auto;
    width: auto; /* 自动宽度 */
    margin-top: 18rpx;
    margin-right: 8rpx; /* 添加右外边距 */
    margin-left: 8rpx;
    padding-left: 20px;
    padding-right: 20px;
    color: black;
    font-size: 30rpx;
    justify-content: center; /* 主轴方向上居中对齐 */
    align-items: center; /* 交叉轴方向上居中对齐 */
}
.head-nav {
 display: flex;
  justify-content: center; /* 使元素在主轴上居中 */
  align-items: center; /* 使元素在交叉轴上居中 */
  gap: 10px; /* 设置元素之间的间距 */
  background-color: white;
    }
    .head-nav>view {
        padding-bottom: 10rpx;
    }
    
    .activite {
        font-weight: bold;
        text-decoration: underline;
        text-decoration-color: orange; /* 下划线的颜色 */
        text-decoration-thickness: 5rpx;
    }

.wenzi{
    margin-top: 30rpx;
    margin-bottom: 30rpx;
}
.btn0:hover {
    background-color: orange;
}

.picture {  
    overflow-y: auto; /* 确保有滚动 */
    max-height: 400px; /* 适当的最大高度 */  
    padding: 0px; /* 添加一些内边距 */  
    margin-bottom: 0;
}  
.flex-container {
  display: flex; /* 使用 Flex 布局 */
  align-items: stretch; /* 交叉轴方向上拉伸对齐 */
  justify-content: space-between; /* 主轴方向上均匀分布元素，两端留空 */
  height: 100%; /* 设置容器高度为父容器高度 */
  margin-bottom: 0;
  display: flex;  
  flex: 0 1 auto; /* 自适应高度 */  
  border: 1px solid red; /* 帮助调试的边框 */  
  min-height: 100px; /* 确保最小高度 */
}
.image-container {
   flex: 1; /* 宽度占 50% */
   display: flex; /* 使用 Flex 布局 */
   align-items: center; /* 交叉轴方向上居中对齐 */
   justify-content: center; /* 主轴方向上居中对齐 */
   font:bold ;
   position: relative; /* 为 image 设置相对定位 */
   max-height: 200px; /* 根据需要设置最大高度 */  
   width: 100%; /* 使图片宽度自适应 */
}
.image-container > image {
  width: 100%; /* 图片宽度为容器宽度 */
  height: 100%; /* 图片高度为容器高度 */
  object-fit: cover; /* 图片填充整个容器 */
}
.text-container {
  flex: 1; /* 宽度占 50% */
  display: flex; /* 使用 Flex 布局 */
  align-items: center; /* 交叉轴方向上居中对齐 */
  justify-content: center; /* 主轴方向上居中对齐 */
  font:bold ;
  background-color: white; /* 设置背景颜色 */
  margin-right: 40rpx;
  margin-left: 40rpx;
  font: bold;
}
.detail-view {  
    position: fixed; /* 或者使用 absolute */  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
    background-color: white; 
    z-index: 1000; /* 确保在最上层 */  
    padding:0;  
    text-align: center;  
}

</style>
 

Pages.json页

{  
  "pages": [  
    
    {
      "path": "pages/login/login",  
      "style": {  
        "navigationBarTitleText": "欢迎您的到来！！！"  
      }  
    },
    { 
      "path": "pages/profile/profile",  
      "style": {  
        "navigationBarTitleText": "涪陵水利局"  
      }  
    },  
    {  
      "path": "pages/personalInfo/personalInfo",  
      "style": {  
        "navigationBarTitleText": "智能门锁"  
      }  
    },  
    {  
      "path": "pages/show/show",  
      "style": {  
        "navigationBarTitleText": "展示页面"  
      }
    }  
  ]  
}