样式修改

马宇豪

2023-07-24 b1fc04036f964163c128586810fec8b5e9da7e2c

样式修改

 pages/index/index.vue

@@ -53,7 +53,6 @@
            Login(){
                this.isLogining = true;
                login(this.form).then(res => {
                    console.log("res",res)
                    if (res.code === 100) {
                        this.isLogining = false;
                         //登录成功后
@@ -93,7 +92,6 @@
            },
            connect() {
                uni.$on('connectStatusChange', (connectStatus) => {
                    console.log('进入连接')
                    var connectStr = ''
                    if (connectStatus == true) {
                        connectStr = '已连接'

 pages/tabBar/current/current.vue

@@ -63,19 +63,21 @@
    z-index: 1;
}
.navBarBox .navBar {
        background-color:lightgrey;
        height: 45px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
  background-color:#fff;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-shadow: 0 3px 12px rgba(0,0,0,0.05);
}
.barText{
    text-align: center;
    width: 85%;
    font-size: 16px;
    /* text-align: center; */
    font-weight: 600;
  /* margin-left: 20px; */
  text-align: center;
  width: 85%;
  font-size: 16px;
  /* text-align: center; */
  font-weight: 600;
}
.statusBar{
    background-color:lightgrey;

 pages/tabBar/information/information.vue

@@ -21,8 +21,10 @@
                <view class="listContent" v-if="informationList.length > 0">
                    <view v-for="(item, index) in informationList" :key="index" class="itemContent">
                        <view class="content" @click="toDetail(item)">
                            <text>[{{item.colorContent}}]</text>
                            <text>{{item.title}},{{item.content}}</text>
              <view class="textContent">
                <text>[{{item.colorContent}}]</text>
                <text>{{item.title}},{{item.content}}</text>
              </view>
                            <view class="buttonContent">
                                <u-button v-if="item.buttonContent == '审核通过'" size="mini" class="buttonCo" style="background-color:rgb(17, 204, 33);color: white">
                                    {{item.buttonContent}}
@@ -125,7 +127,7 @@

</script>

<style>
<style lang="scss" scoped>
.box {
    display: flex; 
    flex-direction: column; 
@@ -141,12 +143,13 @@
    z-index: 1;
}
.navBarBox .navBar {
        background-color:lightgrey;
        height: 40px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
  background-color:#fff;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-shadow: 0 3px 12px rgba(0,0,0,0.05);
}
.barText{
    text-align: center;
@@ -161,6 +164,7 @@
.contentList{
    display: flex;
    flex-direction: column;
  padding-bottom: 65px;
}
.buttonGroup{
    margin: 18px 12px;
@@ -215,38 +219,54 @@
    align-items: center;
}
.listHead{
    display: flex;
    align-items: center;
    /* background-color:lightgrey; */
    height: 25px;
    padding: 10px 10px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.listContent{
    display: flex;
    flex-direction: column;
    padding: 0 10px;
  margin: 0 12px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.05);
}
.itemContent{
    font-size: 16px;
    color: gray;
    margin-top: 10px;
    border-bottom: 1px solid lightgrey;
	
  font-size: 16px;
  color: #333;
  margin-top: 15px;
  padding: 0 12px 15px;
  border-bottom: 1px solid #ebebeb;

  &:last-of-type{
    border-bottom: none;
  }
}
.content{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;

  .textContent{
    width: calc(100% - 90px);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }

  .buttonContent{
    width: 80px;
  }
}
.buttonCo{
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 13px;
}
.buttonContent{
    float: right; 
    width: 80px;
    margin-top: -5px;
}

/* .divider{
    height: 1px;
    background-color: gray;

 pages/tabBar/notice/detail.vue

@@ -10,12 +10,10 @@
                    <u-icon name="arrow-left" color="black" size="17" @click="goBack" />
                    <view class="barText">信息详情</view>
                </view>
				
                <view class="divider"></view>
            </view>
        </view>
        <!-- 页面内容 -->
        <view style="padding: 10px 15px;display: flex;flex-direction: column;">
        <view class="detailCard">
            <text style="font-size: 18px;"><b>标题：</b>{{detailData.title}}</text>
            <text class="textTop"><b>类别：</b>{{detailData.disaster}}</text>
            <view style="display: flex;align-items: center;" class="textTop">
@@ -103,9 +101,9 @@
                >确认发布</u-button>
            </view>
        <!--     //村级显示 -->
            <view class="measures">
                <u-button type="primary" @click="goMeasures">响应措施反馈</u-button>
            </view>
        </view>
        <view class="measures">
            <u-button class="resBtn" type="primary" @click="goMeasures">响应措施反馈</u-button>
        </view>
    </view>
</template>
@@ -173,7 +171,6 @@
        },
        methods: {
            goBack() {
                console.log("1111")
                uni.navigateBack({
                    url:'./notice/notice'
                });
@@ -271,25 +268,26 @@
    }
</script>

<style>
<style lang="scss" scoped>
a{
    text-decoration: none;
}
.navBarBox .navBar {
    /* background-color:lightgrey; */
    height: 30px;
    display: flex;
    flex-direction: row;
    /* justify-content: center; */
    align-items: center;
/*     padding-top:5px ; */
    padding: 5px 8px;
  background-color:#fff;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-shadow: 0 3px 12px rgba(0,0,0,0.05);
}
.barText{
    margin-left: 36%;
    font-weight: 600;
    font-size: 18px;

  /* margin-left: 20px; */
  text-align: center;
  width: 85%;
  font-size: 16px;
  /* text-align: center; */
  font-weight: 600;
}
.navBarBox .navBar .logo {
    width: 82rpx;
@@ -323,6 +321,15 @@
    background-color: lightgray;
    margin-left: 15px;
}
.detailCard{
    display: flex;
    flex-direction: column;
    background: #fff;
    box-shadow: 0 3px 12px rgba(0,0,0,0.05);
    margin: 12px 12px 20px;
    border-radius: 5px;
    padding: 30px 12px;
}
.btn{
    margin-top: 80px;
    display: flex;
@@ -331,7 +338,13 @@
    width: 100%;
}
.measures{
    margin-top: 50px;
    margin-top: 50px 12px 0;
    padding: 0 12px;
	
    .resBtn{
        border-radius: 5px;
        box-shadow: 0 3px 12px rgba(33,148,239,0.4);
    }
}

</style>

 pages/tabBar/notice/measures.vue

@@ -6,10 +6,11 @@
            <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
            <!-- 真正的导航栏内容 -->
            <view class="navBar">
                <u-icon name="arrow-left" color="black" size="17" @click="goBack" />
                <view class="barText">响应措施反馈</view>
            </view>
        </view>
        <view style="display: flex;flex-direction: column; padding: 10px 15px;">
        <view class="measureCard">
            <view class="first">
                <text style="font-size: 16px;margin-bottom: 20px;">基础措施</text>
                 <u-checkbox-group
@@ -46,7 +47,9 @@
                        {{item.name}}
                    </view>
            </view>
            <u-button class="btn" type="success">提交</u-button>
        </view>
        <view class="measures">
        <u-button class="measureBtn" type="success">提交</u-button>
        </view>
    </view>
</template>
@@ -89,6 +92,12 @@
            uni.hideTabBar();
        },
        methods: {
            goBack() {
                uni.navigateBack({
                    url:'./detail/detail'
                });
            },
			
            checkboxChange(n) {
                console.log('change', n);
            },
@@ -148,12 +157,31 @@

<style lang='scss' scoped>
.navBarBox .navBar {
    background-color:lightgrey;
    height: 25px;
  background-color:#fff;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-shadow: 0 3px 12px rgba(0,0,0,0.05);
}
.barText{
  /* margin-left: 20px; */
  text-align: center;
  width: 85%;
  font-size: 16px;
  /* text-align: center; */
  font-weight: 600;
}

.measureCard{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #fff;
    box-shadow: 0 3px 12px rgba(0,0,0,0.05);
    margin: 12px 12px 20px;
    border-radius: 5px;
    padding: 30px 12px;
}
.fix{
    position: sticky;
@@ -191,6 +219,17 @@
    margin-top: 5px;
    font-size: 14px;
}

.measures{
    margin-top: 50px 12px 0;
    padding: 0 12px;
	
    .measureBtn{
        border-radius: 5px;
        box-shadow: 0 3px 12px rgba(33,239,102,0.4);
    }
}

/* .btn{
    position: fixed;
    bottom: var(--window-bottom, 1);

 pages/tabBar/notice/notice.vue

@@ -12,36 +12,38 @@
            </view>
        </view>
        <!-- 页面内容 -->
        <scroll-view scroll-y  :style="{height: 900 + 'px'}">
        <view style="display: flex;flex-direction: column;margin-bottom: 10px;">
            <view class="buttonGroup">
                <view style="display: flex;">
                    <view  class="buttonAll all"
                        :class="{ 'active': selectedSaleAnalysis === 'all'}" 
                        @click="handleButtonClick({label: 'all',name: '全部'})">
                        全部
                    </view>
                    <view v-for="(button, index) in buttons" :key="index" class="buttonItem"
                        :class="{ 'active': selectedSaleAnalysis === button.label,
    <view class="controlBar">
      <view class="buttonGroup">
        <view  class="buttonItem all"
               :class="{ 'active': selectedSaleAnalysis === 'all'}"
               @click="handleButtonClick({label: 'all',name: '全部'})">
          全部
        </view>
        <view v-for="(button, index) in buttons" :key="index" class="buttonItem"
              :class="{ 'active': selectedSaleAnalysis === button.label,
                         'red': button.label === 'red',
                         'orange':button.label === 'orange',
                         'yellow':button.label === 'yellow',
                         'blue': button.label === 'blue'}" 
                        @click="handleButtonClick(button)">
                        {{ button.name }}
                    </view>
                </view>
                <view class="switchBtn">
                    <text style="margin-right: 7px;">仅紧临</text>
                    <u-switch v-model="checked" size="20" @change="clickSwitch"></u-switch>
                </view>
            </view>
                         'blue': button.label === 'blue'}"
              @click="handleButtonClick(button)">
          {{ button.name }}
        </view>
      </view>
      <view class="listHead">
        <view class="switchBtn">
          <u-checkbox-group>
            <u-checkbox v-model="isReadOnly" @change="chooseRead"></u-checkbox>
          </u-checkbox-group>
          <text>只显示未读</text>
        </view>
        <view class="switchBtn">
          <u-switch v-model="checked" size="20" @change="clickSwitch" style="margin-right: 6px"></u-switch>
          <text>仅紧临</text>
        </view>
      </view>
    </view>
        <view style="display: flex;flex-direction: column;margin-bottom: 55px;">
            <view class="noticeList">
                <view class="listHead">
                    <u-checkbox-group style="margin-left: 15px;">
                        <u-checkbox v-model="isReadOnly" @change="chooseRead"></u-checkbox>只显示未读
                    </u-checkbox-group>
                </view>
                <view class="listContent" v-if="noticeList.length > 0" >
                    <view v-for="(item, index) in noticeList" :key="index" class="itemContent" >
                        <view class="content" v-if="item.isRead" >
@@ -88,7 +90,6 @@
                </view>
            </view>
        </view>
        </scroll-view>
        <view class="lastbottom">共<span style="font-weight: 600;"> {{noticeList.length}} </span>条 未叫应<span style="font-weight: 600;">{{noSpeak}}</span> 条</view>
        <dia ref="showDialog" @close="close"></dia>
        <tabBar :currentPagePath="page" :tabBarList="tabBarLists"></tabBar>
@@ -169,7 +170,6 @@
                this.data.searchParams.emergType = this.checked ? 1 : null ;
                this.data.searchParams.warningLevel =  this.selectedSaleAnalysis =='all' ? null : this.selectedSaleAnalysis =='red' ? 1 : this.selectedSaleAnalysis =='orange' ? 2: this.selectedSaleAnalysis =='yellow'? 3 : 4;
                getNotice(this.data).then(res => {
                    console.log("dddddr",res);
                    if (res.code == 100) {
                        this.noticeList = res.data ? res.data : [];
                        this.noticeListCopy = this.noticeList;
@@ -244,7 +244,7 @@
    }
</script>

<style>
<style lang="scss" scoped>
.box {
    display: flex; 
    flex-direction: column; 
@@ -260,12 +260,13 @@
    z-index: 1;
}
.navBarBox .navBar {
        background-color:lightgrey;
        height: 40px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
  background-color:#fff;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-shadow: 0 3px 12px rgba(0,0,0,0.05);
}
.barText{
    /* margin-left: 20px; */
@@ -283,22 +284,46 @@
    height: 82rpx;
    margin-right: 10rpx;
} */
.buttonGroup{
    margin: 18px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;

.controlBar{
  margin: 12px 12px 0;
  padding: 12px;
  height: 90px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: calc(100% - 24px);
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.05);

  .buttonGroup{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
  }

  .listHead{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

.buttonItem{
    margin-left:5px;
  width: calc(20% - 4px);
    color: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 47px;
    height: 30px;
    border-radius: 5px;
  &.active{
    border: 1px solid #fff;
  }
}
.buttonAll{
    margin-left:5px;
@@ -320,7 +345,7 @@
    border: 1.5px solid #8d8d8d;
}
.red {
    background-color: red;
    background-color: #ff5555;
}
.orange {
    background-color: rgb(251, 158, 13);
@@ -329,36 +354,44 @@
    background-color: rgb(255, 223, 37);
}
.blue {
    background-color: rgb(2, 167, 240);
    background-color: #409EFF;
}
.switchBtn{
    display: flex;
    align-items: center;
}

.listHead{
    display: flex;
    align-items: center;
    background-color:lightgrey;
    height: 35px;
.noticeList{
  margin-top: 12px;
  height: calc(100vh - 266px);
  overflow: hidden;
  overflow-y: scroll;
}

.listContent{
    display: flex;
    flex-direction: column;
    padding: 10px 10px;
    margin: 0 12px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.05);
}
.itemContent{
    font-size: 16px;
    color: gray;
    margin-top: 10px;
    border-bottom: 1px solid lightgrey;
	
    color: #333;
    margin-top: 15px;
  padding: 0 12px 15px;
    border-bottom: 1px solid #ebebeb;

  &:last-of-type{
    border-bottom: none;
  }
}
.content{
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: 10px;

}
.contentNoRead{
    font-size: 14px;
@@ -366,13 +399,18 @@
}
.lastbottom{
    width: 100%;
    height: 100px;
    height: 40px;
    background-color: white;
    text-align: center;
    line-height: 50px;
    line-height: 40px;
    position: fixed;
    bottom: var(--window-bottom, 0);
    bottom: 50px;
    z-index: 99;
    font-size: 16px;
  box-shadow: 0 -3px 12px rgba(0,0,0,0.04);
  border-radius: 5px 5px 0 0;
  span{
    margin: 0 2px;
  }
}
</style>

 pages/tabBar/response/response.vue

@@ -6,7 +6,7 @@
            <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
            <!-- 真正的导航栏内容 -->
            <view class="navBar">
                <view class="barText"></view>
                <view class="barText">叫应记录</view>
            </view>
        </view>
        <!-- 页面内容 -->
@@ -103,12 +103,21 @@

<style>
.navBarBox .navBar {
    background-color:lightgrey;
    height: 15px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  background-color:#fff;
  height: 50px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  box-shadow: 0 3px 12px rgba(0,0,0,0.05);
}
.barText{
  /* margin-left: 20px; */
  text-align: center;
  width: 85%;
  font-size: 16px;
  /* text-align: center; */
  font-weight: 600;
}
.fix{
    position: sticky;
@@ -122,22 +131,34 @@
    background-color:lightgrey;
}
.responseList{
    display: flex;
    flex-direction: column;
    padding: 20px 15px;
  display: flex;
  flex-direction: column;
  margin: 0 12px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.05);
  margin-top: 12px;
}
.itemContent{
    display: flex;
    border-bottom: 1px lightgrey solid;
    margin-top: 15px;
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #333;
  margin-top: 15px;
  padding: 0 12px;
  border-bottom: 1px solid #ebebeb;

  &:last-of-type{
    border-bottom: none;
  }
}
.timeLeft{
    border-radius: 13px;
    border-radius: 5px;
    padding: 15px 15px;
    background-color: rgb(174, 228, 255) ;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-items: flex-start;
    justify-content: center;
    margin-bottom: 15px;
}

 pages/tabBar/tabBarIndex.vue

@@ -61,6 +61,7 @@
    background-color: red;
    z-index: 9999;
    width: 100%;
  box-shadow: 0 -3px 12px rgba(0,0,0,0.05);
}
.u-page__item__slot-icon{
    width: 24px;