一款好用的小程序--搜罗各种实用软件+源码

最新推荐文章于 2024-05-02 01:59:55 发布

weixin_48506781

最新推荐文章于 2024-05-02 01:59:55 发布

阅读量147

点赞数

文章标签：小程序 css css3

本文链接：https://blog.csdn.net/weixin_48506781/article/details/126089666

版权

进入正文。
想搜索小程序源码，可以进里面搜索。

例如现在很火的去水印小程序源码，各种流量主。

在这里插入图片描述

这款小程序的界面
在这里插入图片描述

<view class="cu-modal {{modalName?'show':''}}" wx:if="{{modalName}}">
    <view class="cu-dialog">
        <view class="cu-bar bg-white justify-end">
            <view class="content">温馨提示</view>
            <view bindtap="hideModal" class="action">
                <text class="cuIcon-close text-red"></text>
            </view>
        </view>
        <view class="padding-xl"> 亲~，你未登录，无法下载原头像^_^ </view>
    </view>
</view>
<view>
    <view canvasId="myCanvas" class="myCanvas">
        <image src="{{okimg}}" style="height:320px;width:320px;"></image>
    </view>
    <view class="cu-bar bg-white">
        <view class="action"></view>
        <view bindtap="beifen" class="action" hoverClass="none">
            <text class="cuIcon-down"></text>
            <text class="text-df"></text>备份原头像 </view>
    </view>
    <view catchtap="_closeModal" class="cu-modal card-modal {{poster_show?'show':''}}">
        <view class="poster-modal-content" style="top:{{CustomBar+15}}px">
            <image catchtap="_previewPoster" class="card-modal-pic" mode="widthFix" src="{{poster_path}}"></image>
            <button catchtap="_saveAlbum" class="flex-center make-button" hoverClass="btn-active" wx:if="{{poster_path}}">保存到相册</button>
        </view>
    </view>
    <view class="acbtn">
        <view bindtap="preventTouchMove" class="mask-meng" wx:if="{{mengShow}}"></view>
        <button bind:tap="savePic" class="buttonmask" hoverClass="plain-hover"> 保存到相册 </button>
        <button class="buttonmask1" hoverClass="plain-hover" openType="share">分享给好友</button>
    </view>
</view>
<painter bind:imgOK="_onImgOK" palette="{{imgDraw}}" scaleRatio="2" style="position: absolute; top: -9999rpx;"></painter>

page {
    background: #fff;
}

.save {
    background-color: #0faf0f;
    color: #fff;
}

.save,.share {
    font-size: 32rpx;
}

.myCanvas {
    margin: 15px auto auto;
    text-align: center;
}

.tip {
    bottom: 30rpx;
    color: #666;
    font-size: 25rpx;
    height: 50rpx;
    line-height: 50rpx;
    position: absolute;
    text-align: center;
}

.mask-meng,.tip {
    left: 0;
    width: 100%;
}

.mask-meng {
    background: #000;
    height: 100%;
    opacity: .7;
    position: fixed;
    top: 0;
    z-index: 9000;
}

.poster-modal-content {
    flex-direction: column;
    height: auto;
    justify-content: flex-start;
    position: absolute;
    width: 740rpx;
    z-index: 99999;
}

.poster-modal-content image {
    border-radius: 30rpx;
    margin-bottom: 37rpx;
    width: 570rpx;
    z-index: 99999;
}

.make-button {
    background: #41c393;
    border-radius: 20rpx;
    color: #fff;
    font-size: 30rpx;
    height: 80rpx;
    line-height: 80rpx;
    margin: 10rpx auto;
    width: 510rpx!important;
}

.background {
    background-size: 100% 100%;
    height: 100%;
    position: fixed;
    width: 100%;
    z-index: -1;
}

.buttonmask {
    align-items: center;
    background: #41c393;
    box-shadow: 0 6px 8px -4px rgba(0,0,0,.1);
    color: #fff;
    display: flex;
    font-size: 30rpx;
    height: 80rpx;
    justify-content: center;
    margin: 20rpx auto auto;
    width: 90%;
}

.buttonmask1,.buttonmask2 {
    align-items: center;
    background: #fff;
    color: #474747;
    display: flex;
    font-size: 30rpx;
    height: 80rpx;
    justify-content: center;
    margin: 20rpx auto auto;
    width: 90%;
}

.plain-hover {
    box-shadow: 1rpx 1rpx 1rpx hsla(0,0%,81%,.5);
}

.cu-bar {
    min-height: unset!important;
}

.acbtn {
    margin-bottom: 50rpx;
}